/* ===== ZÁKLAD ===== */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  background: #FFFFFF;

  overflow: hidden;

}



/* ========================= HEADER BASE ========================= */



.ns-header {

  position: relative;

  z-index: 1000;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  background: transparent;

}



/* ========================= BACK BUTTON ========================= */



.back-btn {

  position: fixed;

  top: 28px;

  left: 40px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 109px;

  height: 42px;

  border: none;

  border-radius: 15px;

  background: #121212;

  color: #F5F5F5;

  font-family: 'Supreme Variable', 'Inter', sans-serif;

  font-weight: 700;

  font-size: 16.3px;

  cursor: pointer;

  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}



.back-btn .back-ico {

  width: 24px;

  height: 24px;

  display: block;

}



.back-btn:hover {

  transform: translateY(-2px);

}



/* ========================= LOGO CENTER ========================= */



.ns-brand {

  position: fixed;

  top: 28px;

  left: 50%;

  transform: translateX(-50%);

}



.logo-wrap {

  display: grid;

  place-items: center;

  height: 46px;

}



.logo {

  height: 23px;

  width: auto;

  display: block;

}



/* ========================= RIGHT ACTIONS ========================= */



#nsActions {

  position: fixed;

  top: 28px;

  right: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

}



/* ------------------------- MODE BUTTON ------------------------- */



.ns-iconbtn {

  width: 42px;

  height: 42px;

  border-radius: 15px;

  border: 1px solid #121212;

  background: #F5F5F5;

  display: grid;

  place-items: center;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;

}



.ns-iconbtn img {

  width: 24px;

  height: 24px;

  display: block;

}



.ns-iconbtn:hover {

  transform: translateY(-1px);

}



/* ------------------------- MENU BUTTON ------------------------- */



.menu-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 115px;

  height: 42px;

  border-radius: 15px;

  border: 1px solid #121212;

  background: #F5F5F5;

  color: #121212;

  font-family: 'Supreme Variable', 'Inter', sans-serif;

  font-weight: 700;

  font-size: 16.3px;

  cursor: pointer;

  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;

}



.menu-btn:hover {

  transform: translateY(-2px);

}



.menu-btn .icon-wrap {

  width: 24px;

  height: 24px;

  position: relative;

  display: grid;

  place-items: center;

  transition: transform 0.25s ease;

  transform: rotate(90deg);

}



.menu-btn .icon {

  position: absolute;

  inset: 0;

  width: 24px;

  height: 24px;

  transition: opacity 0.16s ease;

}



.menu-btn .icon-b {

  opacity: 0;

}



.menu-btn.toggled {

  background: #121212;

  color: #F5F5F5;

  border-color: #121212;

}



.menu-btn.toggled .icon-wrap {

  transform: rotate(270deg);

}



.menu-btn.toggled .icon-a {

  opacity: 0;

}



.menu-btn.toggled .icon-b {

  opacity: 1;

}



/* ------------------------- CONTACT BUTTON ------------------------- */



.contact-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 99px;

  height: 42px;

  border-radius: 15px;

  border: 1px solid #121212;

  background: #121212;

  color: #F5F5F5;

  font-family: 'Supreme Variable', 'Inter', sans-serif;

  font-weight: 700;

  font-size: 16.3px;

  text-decoration: none;

  cursor: pointer;

  transition: transform 0.16s ease, box-shadow 0.16s ease;

}



.contact-btn:hover {

  transform: translateY(-2px);

}



/* ========================= DROPDOWN MENU ========================= */



.ns-dropdown {

  position: fixed;

  top: -9999px;

  left: -9999px;

  width: 115px;

  padding: 16px 18px;

  border-radius: 15px;

  background: #f5f5f5;

  color: #121212;

  transform: translateY(-8px);

  opacity: 0;

  visibility: hidden;

  transition: transform 0.18s ease, opacity 0.18s ease;

  z-index: 1200;

}



.ns-dropdown.is-open {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.ns-dropdown__list {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.ns-dropdown__list a {

  color: #121212;

  text-decoration: none;

  font-family: 'Supreme Variable', 'Inter', sans-serif;

  font-weight: 700;

  font-size: 16.3px;

  line-height: 1.2;

  transition: color 0.16s ease;

}



.ns-dropdown__list a:hover {

  color: #121212;

}



/* ========================= RESPONSIVE ========================= */



@media (max-width: 600px) {

  .back-btn { left: 24px; }

  #nsActions { right: 24px; }



  .menu-btn,

  .contact-btn {

    width: 110px;

    height: 44px;

    font-size: 14px;

  }



  .ns-dropdown {

    width: 180px;

    padding: 14px 16px;

    border-radius: 18px;

  }



  .ns-dropdown__list a {

    font-size: 18px;

  }

}



.ns-header{

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  backdrop-filter: blur(6px) saturate(140%);

  background: rgba(245,245,245,.65);

}

.ns-brand .logo{ height: 28px; display: block; }



/* =========================

   HERO – FN VALAŠSKO

========================= */



.hero-fn {

  position: relative;

  width: 100%;

  height: 100vh;

  background: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  overflow: hidden;

  padding: 0;

}



/* SRDCE JAKO IMG NA POZADÍ */

.hero-bg-img {

  position: absolute;

  top: 55%;

  left: 50%;

  width: 700px;

  transform: translate(-50%, -50%);

  opacity: 1;

  user-select: none;

  pointer-events: none;

  z-index: 0;

}



/* OBSAH */

.hero-inner {

  position: relative;

  z-index: 2;

  max-width: calc(100% - 80px);

  margin-left: 80px;

  display: grid;

  grid-template-columns: 560px 1fr;

  column-gap: 0;

  align-items: start;

  box-sizing: border-box;

  padding-bottom: 200px;

  transform: translateY(30px);

}



/* LEVÝ BLOK (TEXT + BUTTON) */

.hero-left {

  display: flex;

  flex-direction: column;

  gap: 30px;

  transform: translateY(14px);

}



.hero-text {

  max-width: 380px;

  font-family: 'Supreme Variable','Inter',sans-serif;

  color: #121212;

  font-size: 14.1px;

  line-height: 1.6;

}

.hero-text p { margin: 0 0 8px 0; }

.hero-text p:last-child { margin-bottom: 0; }



/* INFO GRID */

.hero-info {

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-content: start;

  margin-left: -110px;

  column-gap: 60px;

}



.info-col {

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.info-col-item { gap: 12px; }



.info-title {

  font-family: 'Supreme Variable','Inter',sans-serif;

  font-size: 14.1px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.8px;

  color: #121212;

  margin-bottom: 2px;

}

.info-title--blue { color: #199CBD; }



.info-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.info-list li {

  font-family: 'Supreme Variable','Inter',sans-serif;

  font-weight: 700;

  color: #121212;

  font-size: 14.1px;

  line-height: 1.35;

  margin: 0;

}



.info-item {

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.info-value {

  margin: 0;

  font-family: 'Supreme Variable','Inter',sans-serif;

  color: #121212;

  font-size: 14.3px;

  line-height: 1.35;

}



/* LOGO DOLE */

.hero-logo {

  position: absolute;

  bottom: -60px;

  z-index: 1;

}

.hero-logo img {

  width: 750px;

  height: auto;

  display: block;

}



/* CTA BUTTON */

.btn-final {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;

  height: 72px;

  width: 224px;

  border-radius: 20px;

  box-shadow: inset 0 0 0 2px #0b0b0c;

  background: transparent;

  overflow: hidden;

  text-decoration: none;

  isolation: isolate;

  cursor: pointer;

}

.btn-text {

  position: relative;

  z-index: 3;

  font-family: 'Supreme Variable','Inter',sans-serif;

  font-size: 16.3px;

  color: #0b0b0c;

  padding-left: 24px;

  font-weight: 700;

  transition: opacity 0.45s ease,

              transform 0.55s cubic-bezier(0.22, 0.9, 0.22, 1),

              color 0.45s ease;

}

.btn-bg {

  position: absolute;

  inset: 0;

  background: #121212;

  border-radius: 20px;

  z-index: 1;

  clip-path: inset(0 0 0 calc(100% - 72px) round 20px);

  transition: clip-path 0.6s cubic-bezier(0.22, 0.9, 0.22, 1);

}

.btn-arrow {

  position: absolute;

  top: 50%;

  right: 19.25px;

  width: 33.5px;

  height: 33.5px;

  transform: translateY(-50%);

  z-index: 3;

  transition: left 0.6s cubic-bezier(0.22, 0.9, 0.22, 1) 0.05s,

              right 0.6s cubic-bezier(0.22, 0.9, 0.22, 1) 0.05s,

              transform 0.6s cubic-bezier(0.22, 0.9, 0.22, 1) 0.05s;

}

.btn-arrow img { width: 100%; height: 100%; display: block; }

.btn-final:hover .btn-bg { clip-path: inset(0 0 0 0 round 20px); }

.btn-final:hover .btn-text {

  opacity: 0;

  transform: translateX(-10px);

  color: #fff;

  transition-delay: 0.05s;

}

.btn-final:hover .btn-arrow {

  left: calc(50% - 16.75px);

  right: auto;

  transform: translateY(-50%) rotate(45deg);

}



/* =========================

   RESPONSIVE

========================= */



@media (max-width: 1280px) {

  .hero-inner { margin-left: 80px; }

}



@media (max-width: 1024px) {

  .hero-inner {

    margin-left: 0;

    width: 92vw;

    grid-template-columns: 1fr;

    row-gap: 32px;

    padding-bottom: 140px;

    transform: translateY(20px);

  }

  .hero-info { grid-template-columns: 1fr 1fr; margin-left: 0; }

  .hero-left { align-items: center; text-align: center; transform: translateY(12px); }

  .hero-logo { left: 50%; transform: translateX(-50%); bottom: -40px; }

}



@media (max-width: 640px) {

  .hero-info { grid-template-columns: 1fr; gap: 16px; }

  .hero-logo img { width: 220px; }

  .btn-final { width: 168px; height: 64px; }

  .hero-fn { background-size: 140% auto; }

}



/* =========================

   HORIZONTAL LAYOUT

========================= */

#viewport {

  position: fixed;

  inset: 0;

  overflow: hidden;

}



#track {

  display: flex;

  height: 100%;

  will-change: transform;

}



#track > section {

  flex: 0 0 100vw;

  height: 100vh;

  position: relative;

}



/* =========================

   SHOWCASE (telefon)

========================= */

.fn-showcase {

  background: #FFFFFF;

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  padding-left: 120px;

  padding-bottom: 0;

}



.fn-showcase-img {

  position: relative;

  bottom: 0;

  height: auto;

  max-height: 86vh;

  width: auto;

  object-fit: contain;

  display: block;

  user-select: none;

  pointer-events: none;

  margin-left: -670px;

  position: relative;

}



/* (duplikát sekce – ponechávám jak jsi měl) */

.fn-showcase {

  background: #f6f6f6;

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  padding-left: -920px;

  padding-bottom: 0;

}



.fn-showcase-img {

  position: relative;

  left: 0;

  bottom: 0;

  height: auto;

  max-height: 86vh;

  width: auto;

  object-fit: contain;

  display: block;

  user-select: none;

  pointer-events: none;

}





















































/* =========================

   PRINT SECTION — 1:1 dle Figma + karty vpravo s přesahem 250px

========================= */

.fn-print{

  position: relative;

  /* laditelné */

  --panel-w: 1450px;

  --panel-r: 40px;

  --cards-overhang-right: 250px; 

  --copy-left: 64px;

  --copy-top: 72px;



  width: var(--panel-w);

  height: 100vh;

  flex: 0 0 var(--panel-w);

  margin: 0;

  padding: 0;

  background: #F5F5F5;

  overflow: visible; 

  isolation: isolate;

}



.print-wrap{

  position: relative;

  width: 100%;

  height: 100%;

  overflow: visible;

}



/* --- ŠEDÝ PANEL -------------------------------------------------------- */

.print-panel{

  position: absolute;

  top: 0;

  left: 0;

  width: var(--panel-w);

  height: 100vh;

  background: #333333;

  border-radius: var(--panel-r);

  overflow: hidden;

  box-shadow: 0 18px 40px rgba(0,0,0,.28);

}



/* BG v panelu – vlevo, na výšku panelu */

.print-panel::after{

  content: "";

  position: absolute;

  inset: 0;

  background-image: url("FN-valassko-IMG/Gray_BG.svg");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: auto 100%;

}



/* --- TEXT uvnitř panelu ------------------------------------------------ */

.print-copy{

  position: absolute;

  z-index: 2;

  top: 240px;

  left: 40px;

  max-width: 560px;

  color: #f5f5f5;

}



.print-eyebrow{

  margin: 0 0 10px;

  font-family: "Supreme Variable","Inter",sans-serif;

  font-weight: 800;

  font-size: 12.5px;

  color: #199CBD;

}

.print-title{

  margin: 0 0 12px;

  font-family: "Supreme Variable","Inter",sans-serif;

  font-weight: 900;

  color: #FFFFFF;

  font-size: 55px;

}

.print-desc{

  margin: 0;

  font-family: "Supreme Variable","Inter",sans-serif;

  font-size: 12.5px;

  line-height: 1.6;

  color: FFFFFF;

}



/* --- KARTY ------------------------------------------------------------- */

.print-cards{

  position: absolute;

  z-index: 3;

  top: 50%;

  transform: translateY(-50%);

  right: calc(-1 * var(--cards-overhang-right)); /* ↤ přesah doprava o 250px */

  height: 100vh;

  width: auto;

  pointer-events: none;

  user-select: none;

}



/* --- RESPONSIVE -------------------------------------------------------- */

@media (max-width: 900px){

  .fn-print{ --cards-overhang-right: 180px; --copy-left: 36px; }

  .print-title{ font-size: clamp(42px, 9vw, 60px); }

}

@media (max-width: 640px){

  .fn-print{ --panel-r: 20px; }

  .print-panel{ border-radius: var(--panel-r); }

}





































.wrapper {

  width: 100%;

  display: flex;

  justify-content: flex-end;

  padding: 80px 120px; 

}



.card {

  background: #F5F5F5;

  border-radius: 32px;

  width: clamp(320px, 80vw, 1000px);

  aspect-ratio: 16 / 9;

  padding: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Obsah karty */

.artboard {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  width: 100%;

  height: 100%;

}



.artboard img {

  display: block;

  max-height: 100%;

  object-fit: contain;

}



.wallet {

  max-width: 44%;

}



.key {

  max-width: 36%;

}



/* Responzivita */

@media (max-width: 768px) {

  .wrapper {

    justify-content: center;

    padding: 40px;

  }

  .artboard {

    flex-direction: column;

    gap: 24px;

  }

  .wallet, .key {

    max-width: 80%;

  }

}



































/* =========================================================

   CONTACT FORM

========================================================= */



/* --- Overlay -------------------------------------------------------------- */

#contact-overlay {

  position: fixed;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 2147483000;

}

#contact-overlay[aria-hidden="false"] {

  opacity: 1;

  pointer-events: auto;

}



/* --- Drawer --------------------------------------------------------------- */

#contact-drawer {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: auto;



  width: min(600px, 40vw);

  background: #f5f5f5;

  color: #121212;



  border-left: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.35);



  transform: translateX(100%);

  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);

  z-index: 2147483001;



  display: grid;

  grid-template-rows: auto 1fr;



  font-family: "IBM Plex Mono", monospace;



  /* header sizing vars */

  --head-pt: 40px;

  --head-pr: 40px;

  --title-size: 30px;

  --close-size: 72px;

}

#contact-drawer[aria-hidden="false"] {

  transform: translateX(0);

}

html.cd-lock,

body.cd-lock {

  overflow: hidden !important;

}



/* --- Header --------------------------------------------------------------- */

#contact-drawer .cd-head {

  position: relative;

  padding: var(--head-pt) var(--head-pr) 20px var(--head-pr);

}

#contact-drawer .cd-head h2 {

  margin: 0;

  font-size: 48px;

  line-height: 1;

  font-weight: 700;

  color: #121212;

  letter-spacing: 0.5px;

  font-family: "Supreme Variable", "Inter", sans-serif;

}



/* close button */

#contact-drawer .cd-close {

  position: absolute;

  right: var(--head-pr);

  top: calc(var(--head-pt) + (var(--title-size) - var(--close-size)) / 2);



  width: var(--close-size);

  height: var(--close-size);

  border-radius: 20px;



  background: #ffffff;

  border: 1px solid #ffffff;

  color: #121212;



  font-size: 16px;

  line-height: 1;



  display: grid;

  place-items: center;



  cursor: pointer;

  transition: background 0.2s ease;

  z-index: 2147483002;

  pointer-events: auto;

}

#contact-drawer .cd-close:hover {

  background: #f5f5f5;

  border: 1px solid #f5f5f5;

}



/* --- Form layout ---------------------------------------------------------- */

#contact-drawer .cd-form {

  padding: 8px 40px 28px;

  overflow: auto;

}

#contact-drawer .cd-row {

  margin-bottom: 25px;

}

#contact-drawer .cd-label {

  display: block;

  margin-bottom: 8px;

  font-size: 14px;

  letter-spacing: 1px;

  color: #121212;

}

#contact-drawer .cd-muted {

  color: #121212;

  font-size: 12.5px;

}



/* inputs */

#contact-drawer .cd-input {

  position: relative;

}

#contact-drawer input,

#contact-drawer textarea {

  width: 100%;

  height: 40px;



  background: #ffffff;

  color: #121212;



  border: 1px solid #c8c8c8;

  border-radius: 12px;



  font-size: 13.5px;

  padding: 2px 0 2px 12px;



  outline: none;

  transition: background-color 0.25s ease, border-color 0.25s ease;

}

#contact-drawer input:focus,

#contact-drawer textarea:focus {

  background: #f5f5f5;

  border-color: #c8c8c8;

}

#contact-drawer input::placeholder,

#contact-drawer textarea::placeholder {

  color: #c8c8c8;

  letter-spacing: 0.8px;

  font-size: 15px;

  font-family: "IBM Plex Mono", monospace;

}



/* textarea */

#contact-drawer textarea {

  min-height: 86px;

  height: auto;

  resize: vertical;



  border-radius: 20px;

  padding-top: 10px;

  padding-left: 10px;

}



/* --- Status icon ----------------------------------------------- */

#contact-drawer .cd-status {

  position: absolute;

  right: 7px;

  top: 50%;

  transform: translateY(-50%);



  width: 20px;

  height: 20px;

  border-radius: 50%;



  border: 2px solid #c8c8c8;

  display: grid;

  place-items: center;



  transition: border-color 0.25s ease;

}

#contact-drawer .cd-status::after {

  content: "";

  width: 8px;

  height: 4px;

  border-left: 2px solid transparent;

  border-bottom: 2px solid transparent;

  transform: rotate(-45deg);

  transition: border-color 0.25s ease;

}

#contact-drawer .cd-input textarea ~ .cd-status {

  display: none !important;

}

#contact-drawer .cd-input.valid .cd-status {

  border-color: #121212;

}

#contact-drawer .cd-input.valid .cd-status::after {

  border-left-color: #121212;

  border-bottom-color: #121212;

}

#contact-drawer .cd-input.invalid .cd-status {

  border-color: #ff4d4f;

}

#contact-drawer .cd-input.invalid .cd-status::after {

  border-left-color: transparent;

  border-bottom-color: transparent;

}



/* --- Name + Company (2 columns fix width) -------------------------------- */

#contact-drawer .cd-two {

  display: grid;

  grid-template-columns: 205px 205px; 

  justify-content: space-between;    

  column-gap: 0;

  row-gap: 16px;

}

#contact-drawer .cd-two .cd-col { min-width: 0; }

#contact-drawer .cd-two .cd-input input { width: 100%; }



/* --- Checkboxes ----------------------------------------------------------- */

#contact-drawer fieldset { border: 0; padding: 0; }

#contact-drawer .cd-checkboxes {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 56px;

}

#contact-drawer .cd-checkboxes label {

  display: grid;

  grid-template-columns: 16px auto;

  gap: 10px;

  align-items: center;

  font-size: 16px;

  cursor: pointer;

}

#contact-drawer .cd-checkboxes input {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

#contact-drawer .cd-checkboxes i {

  width: 16px;

  height: 16px;

  border: 1px solid #121212;

  background: #f5f5f5;

  border-radius: 4px;

  display: inline-block;

  transition: all 0.25s ease;

}

#contact-drawer .cd-checkboxes input:checked + i {

  background: #121212;

  border-color: #f5f5f5;

}



/* --- Autofill fix -------------------------------------- */

#contact-drawer input:-webkit-autofill,

#contact-drawer textarea:-webkit-autofill {

  -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;

  -webkit-text-fill-color: #121212 !important;

  border-radius: 12px;

  transition: background-color 5000s ease-in-out 0s;

}

#contact-drawer input:-webkit-autofill:focus,

#contact-drawer textarea:-webkit-autofill:focus {

  -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;

  -webkit-text-fill-color: #121212 !important;

}



aside#contact-drawer .cd-actions {

  display: flex !important;

  align-items: flex-end !important;

  justify-content: space-between !important;

  gap: 30px !important;

  margin-top: 24px !important;

  width: 100% !important;

}



/* --- SUBMIT ----------------------- */

.cd-cta-wrap { position: relative; display: inline-block; }



.cd-cta {

  --radius: 20px;

  --cap: 72px;    

  --arrow: 32px;   



  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: flex-start;



  height: 72px;

  width: 168px;

  border-radius: var(--radius);



  background: transparent;

  overflow: hidden;

  isolation: isolate;

  cursor: pointer;

  text-decoration: none;



  border: 2px solid #0b0b0c; 

  padding: 0;

}



/* text */

.cd-cta__text{

  position: relative;

  z-index: 3;

  font-family: "Supreme Variable","Inter",sans-serif;

  font-size: 16.3px;

  font-weight: 700;

  color: #0b0b0c;

  padding-left: 24px;

  transition: opacity .45s ease, transform .55s cubic-bezier(.22,.9,.22,1), color .45s ease;

}



.cd-cta__bg{ display:none !important; }



.cd-cta::after{

  content:"";

  position:absolute;

  top:-2px; bottom:-2px; right:-2px;              

  background:#121212;

  border-radius:var(--radius);

  z-index:1;

  transition: left .6s cubic-bezier(.22,.9,.22,1), right .6s cubic-bezier(.22,.9,.22,1), width .6s cubic-bezier(.22,.9,.22,1);

}



.cd-cta__arrow{

  position:absolute;

  top:50%;

  right:calc((var(--cap) - var(--arrow))/2);

  width:var(--arrow);

  height:var(--arrow);

  transform:translateY(-50%);

  z-index:3;

  transition:left .6s cubic-bezier(.22,.9,.22,1) .05s, right .6s cubic-bezier(.22,.9,.22,1) .05s, transform .6s cubic-bezier(.22,.9,.22,1) .05s;

}

.cd-cta__arrow img{ width:100%; height:100%; display:block; }



.cd-cta:hover::after{ left:-2px; right:-2px; width:auto; }

.cd-cta:hover .cd-cta__text{ opacity:0; transform:translateX(-10px); color:#fff; transition-delay:.05s; }

.cd-cta:hover .cd-cta__arrow{ left:50%; right:auto; transform:translate(-50%,-50%) rotate(45deg); }



/* --- BOOK A CALL ------------------------------------- */

aside#contact-drawer .cd-right {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-end !important;

  gap: 8px !important;

  margin-top: 0 !important;

  min-width: 0 !important;

}

#contact-drawer .cd-note {

  display: block;

  font-size: 16.3px;

  letter-spacing: 0.5px;

  line-height: 1;

}



#contact-drawer .cd-call {

  display: inline-flex;

  align-items: center;

  justify-content: center;



  height: 70px;

  width: 141px;



  border-radius: 20px;

  background: transparent;

  color: #121212;

  border: 1px solid #121212;



  font-family: "Supreme Variable", "Inter", sans-serif;

  font-size: 16.3px;

  font-weight: 700;

  text-decoration: none;



  transition: all 0.3s ease;

}

#contact-drawer .cd-call:hover { transform: translateY(-1px); }



/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {

  #contact-drawer{

    width:100vw;

    border-left:none;

    box-shadow:-20px 0 50px rgba(0,0,0,.35);

    --head-pt:28px; --head-pr:24px; --title-size:26px; --close-size:60px;

  }

  #contact-drawer .cd-head h2{ font-size:40px; }

  #contact-drawer .cd-form{ padding:8px 24px 22px; }

}



@media (max-width: 700px) {

  #contact-drawer .cd-two{

    grid-template-columns:1fr; justify-content:initial; gap:14px;

  }

  .cd-cta{ width:100%; }

  #contact-drawer .cd-call{ height:54px; padding:0 30px; }

  #contact-drawer .cd-head h2{ font-size:36px; }

}



/* Button responsiveness only */

@media (max-width: 900px){

  .cd-cta{ height:66px; width:184px; --cap:68px; --arrow:30px; }

  .cd-cta__text{ font-size:16px; padding-left:22px; }

}

@media (max-width: 760px){

  .cd-cta{ height:62px; width:176px; --cap:64px; --arrow:28px; border-width:2px; }

  .cd-cta__text{ font-size:15.5px; padding-left:20px; }

  .cd-cta__arrow{ right:calc((var(--cap) - var(--arrow))/2); }

}

@media (max-width: 640px){

  .cd-cta{ height:58px; width:168px; --cap:60px; --arrow:26px; border-width:1.8px; border-radius:18px; }

  .cd-cta::after{ border-radius:18px; }

  .cd-cta__text{ font-size:15px; padding-left:18px; }

}

@media (max-width: 520px){

  .cd-cta{ width:100%; max-width:420px; height:56px; --cap:56px; --arrow:24px; border-width:1.8px; }

  .cd-cta__text{ font-size:14.8px; padding-left:16px; }

}

@media (max-width: 480px){

  #contact-drawer .cd-checkboxes{ grid-template-columns:1fr; gap:10px; }

}

@media (max-width: 400px){

  .cd-cta{ height:52px; --cap:52px; --arrow:22px; border-width:1.6px; border-radius:16px; }

  .cd-cta::after{ border-radius:16px; }

  .cd-cta__text{ font-size:14.5px; padding-left:14px; }

}



/* === FULL v7 appended (native horizontal 1024–1389) === */



/* ========================= FULL v7 (non-destructive) =========================

   Native horizontal scrolling for 1024–1389px (no transforms).

   ≥1390px: nechávám tvůj desktop režim.

   <1024px: vertikální rozvržení.

============================================================================= */



/* 1024–1389: native horizontal */

@media (min-width: 1024px) and (max-width: 1389px) {

  html, body { height: 100%; }

  body { overflow: hidden !important; }



  /* Canvas container */

  #viewport {

    position: fixed !important;

    inset: 0 !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    scroll-snap-type: x mandatory !important;

    scrollbar-width: none; /* Firefox hide scrollbar */

  }

  #viewport::-webkit-scrollbar { display: none; } /* WebKit hide */



  /* Row of full-screen sections */

  #track {

    display: flex !important;

    height: 100% !important;

    transform: none !important;   /* kill any previous transforms */

    will-change: auto !important;

  }

  #track > section {

    flex: 0 0 100vw !important;

    height: 100vh !important;

    scroll-snap-align: start !important;

    position: relative !important;

  }



  /* Header: center logo, actions right, back left */

  .ns-header {

    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;

    background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;

    z-index: 2000 !important; padding: 10px 18px !important;

    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;

    pointer-events: auto !important;

  }

  .ns-brand { position: fixed !important; top: 18px !important; left: 50% !important; transform: translateX(-50%) !important; }

  #nsActions { position: fixed !important; top: 18px !important; right: 18px !important; }

  .back-btn { position: fixed !important; top: 18px !important; left: 18px !important; }

  .menu-btn { width: 42px !important; padding: 0 !important; }

  .menu-btn .label { position: absolute !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }



  /* 1100px tidy: hero grid */

  .hero-inner {

    margin-left: 72px !important;

    grid-template-columns: minmax(420px, 52%) 48% !important;

    column-gap: 36px !important;

    align-items: start !important;

    padding-bottom: 110px !important;

    transform: none !important;

  }

  .hero-text { max-width: 560px !important; font-size: 15px !important; line-height: 1.65 !important; }

  .hero-info { margin-left: 0 !important; column-gap: 32px !important; }



  /* Showcase image: no crop, align right, never over hero text */

  .fn-showcase { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; overflow: visible !important; padding: 0 3vw 2vh 3vw !important; }

  .fn-showcase-img { margin-left: auto !important; transform: none !important; max-height: min(84vh, 900px) !important; width: auto !important; height: auto !important; object-fit: contain !important; object-position: right bottom !important; }



  /* Slight push on wider mid-band (1350–1389) */

}

@media (min-width: 1350px) and (max-width: 1389px) {

  .fn-showcase { padding-right: 5vw !important; }

  .fn-showcase-img { max-height: min(86vh, 940px) !important; }

}



/* <1024: vertical (unchanged) */

@media (max-width: 1023px) {

  html, body { height: auto !important; }

  body { overflow-y: auto !important; overflow-x: hidden !important; }



  .ns-header { position: sticky !important; top: 0 !important; background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(0,0,0,.06) !important; padding: 10px 14px !important; }

  .ns-brand { position: static !important; transform: none !important; }

  .logo { height: 22px !important; }

  .back-btn { display: none !important; }

  .ns-iconbtn, .contact-btn { display: none !important; }

  .menu-btn { width: 42px !important; padding: 0 !important; }

  .menu-btn .label { position: absolute !important; clip: rect(0 0 0 0) !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

  #nsActions { position: static !important; }



  #viewport { position: static !important; inset: auto !important; overflow: visible !important; }

  #track { display: block !important; height: auto !important; transform: none !important; will-change: auto !important; }

  #track > section { position: relative !important; height: auto !important; min-height: auto !important; flex: none !important; }



  .hero-fn { height: auto !important; padding: 72px 16px 32px !important; }

  .hero-inner { margin: 0 auto !important; max-width: 980px !important; grid-template-columns: 1fr !important; row-gap: 24px !important; padding-bottom: 0 !important; transform: none !important; }

  .hero-logo { position: static !important; margin-top: 12px !important; }

  .hero-logo img { width: 240px !important; }



  .fn-showcase { padding: 32px 16px !important; justify-content: center !important; }

  .fn-showcase-img { max-width: 100% !important; height: auto !important; transform: none !important; }



  .fn-print { min-height: 640px !important; background: transparent !important; }

  .print-panel { width: 100% !important; height: 100% !important; border-radius: 18px !important; }

  .print-copy { padding: 20px 16px 0 !important; position: relative !important; top: auto !important; left: auto !important; }

  .print-title { font-size: clamp(34px, 9vw, 52px) !important; }

  .print-cards { position: static !important; display: block !important; margin: 16px auto 0 !important; max-width: min(760px, 92%) !important; height: auto !important; transform: none !important; }



  .wrapper { justify-content: center !important; padding: 32px 16px !important; }

  .artboard { flex-direction: column !important; gap: 20px !important; }

  .wallet, .key { max-width: 80% !important; }



  .btn-final { width: 168px !important; height: 58px !important; }

  .btn-text  { font-size: 15px !important; padding-left: 18px !important; }

}