/* NYX refinements: genuine product films, hosting cards, and brand details. */
:root{--nyx-black:#060606}.hero-ground[data-hero-ground],#cta>.mx-auto>div{background-color:#060606!important}.hero-agent{display:none!important}
.dhq-ticker-track{animation-duration:28s!important}
.dhq-glass,.pricing-card-cta{height:auto!important;min-height:46px;box-sizing:border-box;border-radius:999px!important;line-height:1.3!important;padding:12px 28px!important;overflow:visible!important;color:#fff!important;background:linear-gradient(#060606,#060606) padding-box,linear-gradient(90deg,#f5e6c8,#e4b775,#c25c20,#e4b775,#f5e6c8) border-box!important;border:2px solid transparent!important}
.dhq-glass:hover,.pricing-card-cta:hover{background:linear-gradient(#151515,#151515) padding-box,linear-gradient(90deg,#f5e6c8,#e4b775,#c25c20,#e4b775,#f5e6c8) border-box!important;filter:none!important}
.hero-app [data-testid="demo-app"]{background:#060606!important;border-color:#060606!important;border-radius:12px!important;clip-path:inset(0 round 12px)!important;isolation:isolate}
.hero-app [data-testid="demo-app"] iframe{border-radius:12px}.hero-app [data-testid="demo-app"] img{border-radius:12px}
astro-island[component-export="Agent"]{display:block;opacity:1!important;transform:none!important;translate:none!important}
#ai{scroll-margin-top:100px}.nyx-workflow-preview{padding:32px;display:grid;align-items:center;min-height:480px;background:#fcfbf9}.nyx-workflow-film{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#060606;box-shadow:0 24px 48px -20px #0004}.nyx-workflow-film>div{aspect-ratio:16/10}.nyx-workflow-film video,.nyx-workflow-film img{border-radius:16px}.nyx-workflow-film>div>div{background:#060606!important}
#pricing.nyx-hosting-pricing{padding:clamp(80px,10vw,144px) 24px 0;scroll-margin-top:100px}#pricing .pricing-header{max-width:820px;margin:0 auto 64px;text-align:center}#pricing .pricing-header h2{white-space:normal;line-height:1.15;letter-spacing:-.03em}#pricing .pricing-monthly-hosting{max-width:1100px;margin:0 auto}#pricing .pricing-monthly-hosting.active{display:flex;gap:20px;justify-content:center}#pricing .pricing-card-cta{display:flex;align-items:center;justify-content:center;font-family:var(--font-plus-jakarta);font-weight:700}#pricing .pricing-card{background:#060606}#pricing .pricing-card-features{min-height:0}
#cta{padding-bottom:clamp(64px,9vw,128px)}#cta>.mx-auto>div{border-radius:24px}#cta .dhq-glass{position:relative;z-index:2}#nyx-footer .reveal-footer{background:url('/editor-study/dark-noise.webp') repeat,linear-gradient(#060606,#060606)}
@media(max-width:1023px){.nyx-workflow-preview{min-height:0;padding:24px}.nyx-workflow-film{max-width:900px;margin:auto}}
@media(max-width:767px){#pricing .pricing-monthly-hosting.active{flex-direction:column;align-items:center}#pricing .pricing-col{width:100%;max-width:440px}.nyx-workflow-preview{padding:16px}.nyx-workflow-film,.nyx-workflow-film img,.nyx-workflow-film video{border-radius:10px}#pricing .pricing-header{margin-bottom:36px}#cta{padding-bottom:64px}}
@media(prefers-reduced-motion:reduce){.dhq-ticker-track{animation:none!important}}

astro-island[component-export="Reviews"]{display:block} .review-wall{contain:layout;isolation:isolate}.review-card{will-change:translate,rotate,scale}html.nyx-scroll-active .review-card:hover{rotate:var(--r);scale:1}
.hero-app{max-width:1120px!important;margin-inline:auto!important}.hero-app [data-testid="demo-app"]{border:5px solid #fff!important;box-shadow:0 0 0 1px #ffffff60,0 30px 80px -30px #0006!important}
.dhq-faq>div{border-radius:24px!important;overflow:hidden}.dhq-faq button{border-radius:24px!important}
#pricing .pricing-monthly-hosting{align-items:flex-start}#pricing .pricing-col{min-width:0;opacity:1;visibility:visible}#pricing .pricing-col.nyx-enter{animation:nyx-card-enter .85s cubic-bezier(.22,1,.36,1) both}#pricing .pricing-col:nth-child(1){--enter-x:-90px}#pricing .pricing-col:nth-child(2){--enter-x:90px;animation-delay:.12s}#pricing .pricing-col:nth-child(3){--enter-x:120px;animation-delay:.24s}@keyframes nyx-card-enter{from{opacity:0;transform:translateX(var(--enter-x))}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#pricing .pricing-col.nyx-enter{animation:none}}

#top a[href="#features"].dhq-glass{color:#060606!important;background:#fff!important;border:2px solid #e6e4df!important;box-shadow:none!important}#top a[href="#features"].dhq-glass:hover{background:#f4f3ef!important}#top a[href="#features"]::before{display:none!important}

[data-page]>main{position:relative;z-index:3;background:#fcfbf9}

#pricing .pricing-monthly-hosting{max-width:880px;gap:24px;align-items:stretch}#pricing .pricing-col{max-width:420px}#pricing .pricing-card{flex:1;min-height:370px}#pricing .pricing-light .pricing-card{background:#fff;border:1px solid #dfdcd6}#pricing .pricing-light .pricing-card-name,#pricing .pricing-light .pricing-feature-item span,#pricing .pricing-light .pricing-card-price-monthly{color:#060606}#pricing .pricing-light .pricing-card-subtitle,#pricing .pricing-light .pricing-card-price-monthly span,#pricing .pricing-light .pricing-card-price-monthly small{color:#6a6863}#pricing .pricing-popular .pricing-card-stack{height:100%}#pricing .pricing-card-cta{background:#060606!important;border:1px solid #060606!important;color:white!important;padding:14px 24px!important;box-shadow:none!important}#pricing .pricing-popular .pricing-card-cta{background:#fff!important;color:#060606!important;border-color:#d8d5cf!important}#pricing .pricing-card-cta:hover{filter:brightness(.95)!important}.nyx-context-cta{display:inline-flex;margin-top:28px;border-radius:999px;padding:13px 24px;background:#060606;color:white;font-weight:700;font-size:14px;text-decoration:none}.nyx-context-cta:hover{background:#222}@media(max-width:767px){#pricing .pricing-card{min-height:0}}

/* Thin nested hero frame and consistent 8px study demo corners. */
.hero-app [data-testid="demo-app"]{border:2px solid #fff!important;border-radius:10px!important;clip-path:inset(0 round 10px)!important}.hero-app [data-testid="demo-app"] iframe,.hero-app [data-testid="demo-app"] img{border-radius:8px!important}
#ai .nyx-workflow-film,#ai .nyx-workflow-film>div,#ai .nyx-workflow-film video,#ai .nyx-workflow-film img{border-radius:8px!important}#ai .nyx-workflow-film{overflow:hidden;clip-path:inset(0 round 8px)}#ai>.mx-auto>div.overflow-hidden{border-radius:8px!important}
.hero-proof img{object-fit:contain}.hero-proof .relative>svg{display:none}

#pricing .pricing-light .pricing-card-cta{background:#fff!important;color:#060606!important;border:1px solid #d8d5cf!important}#pricing .pricing-popular .pricing-card-cta{background:linear-gradient(#060606,#060606) padding-box,linear-gradient(90deg,#f5e6c8,#e4b775,#c25c20,#e4b775,#f5e6c8) border-box!important;border:2px solid transparent!important;color:white!important}#pricing .nyx-first-month{margin-top:12px!important}#pricing .nyx-first-month .nyx-free-tag{display:inline-block;font-size:12px!important;font-weight:700;color:#060606!important;background:#f2eee7;border:1px solid #e0d7c8;border-radius:999px;padding:6px 10px;line-height:1.2}#pricing .pricing-popular .nyx-first-month .nyx-free-tag{color:#f5e6c8!important;background:#e4b77512;border-color:#e4b77555}
[data-page]>main{border-radius:0 0 32px 32px;overflow:clip}@media(max-width:767px){[data-page]>main{border-radius:0 0 24px 24px}}
[data-page]>main{border-bottom-left-radius:clamp(3rem,6vw,5.5rem);border-bottom-right-radius:clamp(3rem,6vw,5.5rem)}

#pricing .nyx-price-line{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}#pricing .nyx-regular-price{font-size:28px;font-weight:600;color:#8b8882;text-decoration:line-through;text-decoration-thickness:2px}#pricing .nyx-zero-price{font-size:clamp(42px,4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}#pricing .nyx-first-month{display:block;font-size:13px!important;font-weight:400;line-height:1.6;margin-top:12px!important;color:#aaa6a0!important;background:none;border:0;border-radius:0;padding:0}#pricing .pricing-light .nyx-first-month{color:#66625c!important}

.nyx-workflow-intro{display:flex;flex-direction:column;align-items:flex-start;gap:24px}.nyx-workflow-intro p{margin:0}.nyx-workflow-intro .nyx-context-cta{margin-top:0;flex-shrink:0}

.nyx-workflow-description{max-width:640px;text-wrap:wrap;line-height:1.6}.nyx-workflow-booking-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:9px 16px;border-radius:999px;background:#060606;color:#fff;font-size:12px;font-weight:700;line-height:1.3;text-decoration:none}.nyx-workflow-booking-button:hover{background:#222}.nyx-workflow-booking>svg{flex-shrink:0}@media(max-width:767px){.nyx-workflow-description br{display:none}.nyx-workflow-description br::after{content:" "}}

.nyx-workflow-booking{flex-direction:column;align-items:flex-start;gap:12px}.nyx-workflow-booking-copy{margin:0;max-width:270px;color:#060606;font-size:14px;line-height:1.5}

/* Page transitions into /editor. The copies of the site's transition rules in
   nyx-brand.css are scoped under #nyx-nav/#nyx-footer and can never match a
   ::view-transition pseudo, so this page fell back to the browser's default
   crossfade and lost the logo's difference blend (a white logo flash). Same
   rules as app/globals.css: the new page slides up as a sheet over the old
   one, which sinks back, both opaque, so nothing dark shows through. */
@keyframes vt-sheet-in {
  from { transform: translateY(42vh); }
  to { transform: translateY(0); }
}
@keyframes vt-sheet-under {
  from { transform: none; }
  to { transform: translateY(-3vh) scale(0.94); }
}
::view-transition { background-color: #f7f5f2; }
::view-transition-old(root), ::view-transition-new(root) { overflow: hidden; }
::view-transition-old(root) { border-radius: 28px; transform-origin: 50% 0; animation: vt-sheet-under 640ms cubic-bezier(0.16, 1, 0.3, 1) both; }
::view-transition-new(root) { border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px rgba(6, 6, 6, 0.18); animation: vt-sheet-in 640ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: none; border-radius: 0; }
  ::view-transition-new(root) { animation: none; border-radius: 0; box-shadow: none; }
}
::view-transition-group(nyx-logo) { mix-blend-mode: difference; }
::view-transition-group(nyx-logo),
::view-transition-group(nyx-nav),
::view-transition-group(nyx-cta) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }

/* The hero demo is a client-only island, so before its JS runs .hero-app had
   no height and the hero grew by ~570 px when the demo mounted. The demo box
   is always aspect-ratio 1440/900 at the full .hero-app width, so the same
   ratio here reserves exactly the space it will take. */
.hero-app[data-astro-cid-7hogkhjf] {
  aspect-ratio: 1440 / 900;
}

/* Phone menu, copied from app/globals.css ("Phone menu"). Keep in step with
   that block; the spacing tokens are written out because this page does not
   load the site tokens.

   Both overlays carry the same MobileNavLinks markup and these rules.

   Opening, the black sheet grows out of the menu button as a circle
   (clip-path, centred on the button: --m-x/--m-y, set from its position by
   the nav script in layout.tsx), then the rows rise in one after another.
   The sheet itself is solid and never fades: a fading container let the page
   show through it on iOS Safari. Closed it is display:none (see globals). */
#nyx-nav .sp-mobile-overlay {
  /* overrides for the older overlay in nyx-brand.css */
  opacity: 1;
  pointer-events: auto;
  --m-x: calc(100% - 2.6rem);
  --m-y: calc(env(safe-area-inset-top, 0px) + 3rem);
  position: fixed;
  inset: 0;
  /* Down to the bottom of the screen even with Safari's bar collapsed:
     inset 0 stopped at the small viewport, and the page showed in a strip
     under the menu. */
  bottom: auto;
  height: 100lvh;
  z-index: 55;
  display: none;
  background: #060606;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.5rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
  clip-path: circle(0px at var(--m-x) var(--m-y));
  /* closing: almost instant */
  transition:
    clip-path 170ms cubic-bezier(0.4, 0, 1, 1),
    display 170ms allow-discrete;
}

#nyx-nav .sp-mobile-overlay.open {
  opacity: 1;
  pointer-events: auto;
  display: block;
  clip-path: circle(150vmax at var(--m-x) var(--m-y));
  transition:
    clip-path 560ms cubic-bezier(0.32, 0.72, 0, 1),
    display 0s allow-discrete;
}

@starting-style {
  #nyx-nav .sp-mobile-overlay.open {
    clip-path: circle(0px at var(--m-x) var(--m-y));
  }
}

/* Solid band under the logo and the close button. The list scrolls under it
   (open Služby on a short phone), not under the logo. */
#nyx-nav .sp-mobile-overlay::before {
  content: "";
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  height: calc(env(safe-area-inset-top, 0px) + 6.5rem);
  margin: 0 calc(-1 * 1.5rem);
  background: linear-gradient(#060606 78%, rgba(6, 6, 6, 0));
  pointer-events: none;
}

.m-nav {
  display: flex;
  flex-direction: column;
  max-width: 28rem;
  margin: 0 auto;
  font-family: var(--font-plus-jakarta), system-ui, sans-serif;
}

/* Rows rise in behind the growing circle, top to bottom: a short travel
   with a slight settle in scale, on the same iOS-like curve as the sheet. */
@keyframes m-nav-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.open .m-nav > * {
  transform-origin: 0 50%;
  animation: m-nav-in 600ms cubic-bezier(0.32, 0.72, 0, 1) both;
}
.open .m-nav > :nth-child(1) { animation-delay: 70ms; }
.open .m-nav > :nth-child(2) { animation-delay: 110ms; }
.open .m-nav > :nth-child(3) { animation-delay: 150ms; }
.open .m-nav > :nth-child(4) { animation-delay: 190ms; }
.open .m-nav > :nth-child(5) { animation-delay: 230ms; }
.open .m-nav > :nth-child(6) { animation-delay: 270ms; }
.open .m-nav > :nth-child(7) { animation-delay: 310ms; }

.m-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease;
}

.m-nav-link:active { color: #e4b775; }

.m-nav-dd > summary { list-style: none; }
.m-nav-dd > summary::-webkit-details-marker { display: none; }

.m-nav-chevron {
  width: 1.4rem;
  height: 1.4rem;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* .is-collapsed is the nav script's: it holds an open <details> at zero
   height while the list grows in or folds away. Without the script the
   native open/close still works, just without the motion. */
.m-nav-dd[open]:not(.is-collapsed) .m-nav-chevron { transform: rotate(180deg); }
.m-nav-dd[open] > summary { border-bottom-color: transparent; }

.m-nav-dd-body {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.m-nav-dd.is-collapsed .m-nav-dd-body { grid-template-rows: 0fr; }

.m-nav-dd-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
  overflow: hidden;
}

/* padding inside the clipped box, so it folds away with the rest */
.m-nav-dd-list::before,
.m-nav-dd-list::after { content: ""; flex: none; height: 0.25rem; }
.m-nav-dd-list::after { height: 0.75rem; }

.m-nav-dd[open]:not(.is-collapsed) .m-nav-dd-item {
  animation: m-nav-in 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(40ms + var(--i, 0) * 35ms);
}

.m-nav-dd-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.5rem;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease, color 160ms ease;
}

.m-nav-dd-item:active { background: rgba(255, 255, 255, 0.06); color: #ffffff; }

/* The tile is the desktop dropdown's icon (dark glass, light glyph), made
   round, with its service's colour glowing out of the bottom-right corner
   only: a soft radial bloom from the nav-dd-layer--* ramps, the rest stays
   dark. The glyph is the same drawing the desktop row and that page's hero
   use. */
.m-nav-dd-ico {
  --c1: #e4b775; --c2: #c25c20;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 100% 100%, var(--c1) 0%, var(--c2) 26%, rgba(6, 6, 6, 0) 68%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03)),
    #0d0d0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.m-nav-dd-ico--browser   { --c1: #8bb9d9; --c2: #245e93; }
.m-nav-dd-ico--magnifier { --c1: #8fc79a; --c2: #2f7a4a; }
.m-nav-dd-ico--palette   { --c1: #b39ad4; --c2: #5b3a8f; }
.m-nav-dd-ico--shield    { --c1: #86c8c0; --c2: #1f6f68; }
.m-nav-dd-ico--pencil    { --c1: #dd9aa6; --c2: #a33450; }

.m-nav-dd-ico svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke-width: 2.6;
}

.m-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  margin-top: 2rem;
  border-radius: 999px;
  background: #ffffff;
  color: #060606;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  #nyx-nav .sp-mobile-overlay,
  #nyx-nav .sp-mobile-overlay.open { clip-path: none; transition: none; }
  .open .m-nav > *,
  .m-nav-dd[open]:not(.is-collapsed) .m-nav-dd-item { animation: none; }
  .m-nav-chevron,
  .m-nav-dd-body { transition: none; }
}



/* Touch: same footer hit areas as the site (app/globals.css). */
@media (pointer: coarse) {
  #nyx-footer .footer-col a { padding: 0.55rem 0; margin-bottom: 0; }
  #nyx-footer .footer-brand-meta a { display: inline-block; padding-block: 0.7rem; margin-block: -0.45rem; }
}
@media (pointer: coarse) and (min-width: 768px) {
  #nyx-nav .sp-nav-links > a,
  #nyx-nav .sp-nav-links .nav-dd-trigger { padding-block: 0.7rem; margin-block: -0.7rem; }
}

/* Phones: logo and menu button sit at the top of the page and scroll away
   with it, nothing fixed to the top edge (same as app/globals.css). */
@media (max-width: 767px) {
  #nyx-nav .sp-nav,
  #nyx-nav .sp-nav-logo:not(.sp-nav-logo-spacer) { position: absolute !important; }
}

/* Footer reveal (nyx-footer-reveal.js): the page is a cream sheet with rounded
   bottom corners that slides up off the black footer, as on the main site
   (.subpage-light in app/subpage.css). */
body > main,
main { position: relative; z-index: 2; background: #fcfbf9; border-bottom-left-radius: clamp(3rem, 6vw, 5.5rem); border-bottom-right-radius: clamp(3rem, 6vw, 5.5rem); }