@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

:root { --ink: #0b1020; --navy: #111a35; --blue: #4559f5; --cyan: #5d70ff; --aqua: #dce3ff; --paper: #f8faff; --mist: #f2f5fb; --line: #e6eaf2; --muted: #647089; --white: #fff; --sans: "Inter", Arial, sans-serif; }
body { background: var(--paper); font-family: var(--sans); letter-spacing: -.01em; }
h1 { max-width: 660px; font-size: clamp(3rem, 5.6vw, 5.5rem); line-height: 1.02; letter-spacing: -.065em; font-weight: 700; }
h2 { letter-spacing: -.055em; font-weight: 700; } h3 { font-weight: 600; }
.site-header { position: absolute; top: 1rem; width: min(100% - 2rem, 1240px); min-height: 68px; padding: 0 1.4rem; background: rgb(255 255 255 / 88%); border: 1px solid rgb(230 234 242 / 88%); border-radius: 14px; box-shadow: 0 6px 24px rgb(24 43 78 / 6%); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -.045em; }.brand::before { width: 19px; height: 22px; background: var(--blue); clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); content: ""; }.brand span { color: var(--ink); }
nav { gap: 2rem; } nav a { color: var(--ink); font-size: .82rem; font-weight: 500; } nav a:hover { color: var(--blue); }
.button { min-height: 46px; background: var(--blue); border-color: var(--blue); border-radius: 9px; box-shadow: 0 6px 14px rgb(69 89 245 / 22%); font-weight: 600; }.button:hover { background: #3248ee; border-color: #3248ee; box-shadow: 0 9px 18px rgb(69 89 245 / 30%); }.button-small { min-height: 40px; border-radius: 8px; }.text-link { color: var(--blue); font-weight: 600; }
.hero { padding-top: 180px; background: radial-gradient(circle at 67% 30%, #eef1ff 0, transparent 27%), linear-gradient(135deg, #fff 0%, #f7f9ff 72%, #f0f4fb 100%); }.hero::before { opacity: 0; }.hero::after { right: -240px; bottom: -390px; width: 800px; border-color: #e2e7ff; box-shadow: 0 0 0 70px rgb(69 89 245 / 2%), 0 0 0 140px rgb(69 89 245 / 2%); }.hero h1 em { color: var(--blue); }.lead { max-width: 560px; color: #53617a; font-size: 1.08rem; }.hero-note { color: #79849a; }.hero-visual>img { height: 500px; border: 1px solid #e8edf6; border-radius: 18px; filter: saturate(.86) brightness(1.07); box-shadow: 0 22px 48px rgb(24 43 78 / 12%); }.visit-card { right: 1rem; bottom: 1rem; width: min(88%, 350px); color: var(--ink); background: rgb(255 255 255 / 94%); border-color: #e6eaf2; border-radius: 14px; box-shadow: 0 14px 34px rgb(24 43 78 / 13%); }.visit-card small { color: var(--blue); }.visit-card strong { font-size: 1rem; }.visit-card p { border-top: 1px solid var(--line); color: var(--muted); }.visit-card p span { color: #1ca675; font-weight: 600; }.mini-chart { border-color: var(--line); }.mini-chart i { background: linear-gradient(180deg, #9aa7ff, var(--blue)); }.live-dot { background: #36bd88; box-shadow: 0 0 0 5px rgb(54 189 136 / 12%); }
.strip { background: #fff; border-color: var(--line); }.strip .container { color: #55627a; font-weight: 500; }.strip span::before { color: var(--blue); }
.section-heading>p, .benefit-grid p, .feature-panel p, .image-story>div:last-child>p:not(.eyebrow), .contact-grid>div>p:not(.eyebrow) { color: #66738a; }.benefit-grid article { min-height: 220px; border-color: var(--line); border-radius: 12px; box-shadow: 0 5px 18px rgb(24 43 78 / 4%); }.benefit-grid article:nth-child(2) { background: #f7f8ff; }.benefit-grid article:nth-child(3) { color: var(--ink); background: #fff; border-color: var(--line); }.benefit-grid article:nth-child(3) span { color: var(--blue); }.benefit-grid article:nth-child(3) p { color: #66738a; }.benefit-grid h3 { margin-top: 1.6rem; }.benefit-grid span, .workflow li b { color: var(--blue); }
.contrast { color: var(--ink); background: #f1f5fb; }.contrast .eyebrow { color: var(--blue); }.issue-list { border-color: var(--line); }.issue-list p { color: #66738a; border-color: var(--line); }.issue-list b { color: var(--ink); }
.feature-picker button { color: #53617a; background: #f3f5fa; border-radius: 8px; font-weight: 600; }.feature-picker button[aria-selected="true"] { background: var(--blue); }.feature-panel { background: #fff; border-color: var(--line); border-radius: 16px; box-shadow: 0 10px 28px rgb(24 43 78 / 5%); }.panel-label { color: var(--blue); }.feature-panel li { border-color: var(--line); }.mockup { color: var(--ink); background: #f9faff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 28px rgb(24 43 78 / 8%); }.mockup small { color: var(--blue); }.mockup p { color: #66738a; background: #f0f3fb; }.mockup strong { color: var(--ink); }.mockup button { color: #fff; background: var(--blue); }.bars { border-color: var(--line); }.bars i { background: var(--blue); }
.workflow { color: var(--ink); background: #fff; }.workflow .eyebrow { color: var(--blue); }.workflow li { background: #f7f9fd; border-color: var(--line); border-radius: 12px; }.workflow li b { color: var(--blue); }.workflow li p { color: #66738a; }.story-photo img { border-radius: 16px; filter: saturate(.8) brightness(1.06); }.story-photo p { background: rgb(11 16 32 / 80%); border-radius: 9px; }.growth { border-radius: 10px; background: #e5eafe; }.growth span { min-height: 90px; background: #6576f8; }.growth span:last-child { background: var(--blue); }.growth span:not(:last-child):after { color: #dfe4ff; }
.faq details { border-color: var(--line); }.faq summary { font-weight: 600; }.faq p { color: #66738a; }.contact { background: #f4f7fd; }.contact form { border-color: var(--line); border-radius: 16px; box-shadow: 0 12px 28px rgb(24 43 78 / 7%); }.contact-photo img { border-radius: 12px; filter: saturate(.82) brightness(1.06); }.topic-options button { border-color: var(--line); border-radius: 7px; font-weight: 600; }.topic-options button.is-selected { background: var(--blue); border-color: var(--blue); } input, select, textarea { border-color: #dce2ed; border-radius: 7px; } input:focus, select:focus, textarea:focus { outline: 3px solid rgb(69 89 245 / 13%); border-color: var(--blue); }.form-status { color: #5d6b83; }
footer { background: #fff; border-color: var(--line); } footer .brand::before { width: 17px; height: 19px; }
@media (max-width: 820px) { .site-header { top: .75rem; padding: 0 1rem; }.menu-toggle { color: var(--ink); background: #fff; border-color: var(--line); }.menu-toggle:focus { outline: 3px solid rgb(69 89 245 / 13%); } nav { background: #fff; border-color: var(--line); } }

.brand { gap: 0; } .brand::before { display: none; } .brand img { display: block; width: 148px; height: auto; } footer .brand img { width: 136px; }

/* Page rhythm and composition */
.site-header { position: fixed; }.site-header.is-scrolled { top: 0; width: 100%; border-color: rgb(230 234 242 / 96%); border-radius: 0; box-shadow: 0 7px 20px rgb(24 43 78 / 10%); }
.section { padding: clamp(4rem, 7vw, 6rem) 0; scroll-margin-top: 90px; }.contrast-photo { position: relative; overflow: hidden; color: #fff; background: linear-gradient(100deg, rgb(11 16 32 / 94%) 0%, rgb(25 42 84 / 88%) 50%, rgb(11 16 32 / 72%) 100%), url("../../photos/Obrázek1.jpg") center / cover; }.contrast-photo .eyebrow { color: #aebcff; }.contrast-photo h2, .contrast-photo .issue-list b { color: #fff; }.contrast-photo .issue-list, .contrast-photo .issue-list p { border-color: rgb(255 255 255 / 20%); }.contrast-photo .issue-list p { color: #e0e6ff; }
.contrast-grid > :first-child { order: 2; text-align: right; }.contrast-grid > :last-child { order: 1; }.contrast-grid > :first-child h2 { margin-left: auto; }
#funkce .section-heading { display: block; max-width: 790px; margin: 0 auto; text-align: center; } #funkce .section-heading > p { max-width: 560px; margin: 0 auto; }.workflow .container > .eyebrow, .workflow .container > h2, .faq > .eyebrow, .faq > h2 { margin-right: auto; margin-left: auto; text-align: center; }.faq > h2 { max-width: 670px; }
@media (max-width: 820px) { .site-header.is-scrolled { top: 0; width: 100%; border-radius: 0; }.contrast-grid > :first-child, .contrast-grid > :last-child { order: initial; text-align: left; }.contrast-grid > :first-child h2 { margin-left: 0; } }

/* Footer, focus, and motion refinements */
.site-footer { color: var(--ink); background: #fff; border-top: 1px solid var(--line); }.site-footer .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .7fr); gap: clamp(1.5rem, 4vw, 4.5rem); padding: clamp(3.2rem, 6vw, 5rem) 0 2.7rem; }.site-footer h3 { margin: 0 0 1rem; color: var(--ink); font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: 0; }.site-footer a:not(.brand) { display: block; width: max-content; margin: .55rem 0; color: var(--muted); font-size: .8rem; text-decoration: none; }.site-footer a:not(.brand):hover, .site-footer .footer-cta { color: var(--blue); }.footer-intro p, .site-footer div > p { margin: 1.1rem 0 0; color: var(--muted); font-size: .82rem; }.footer-intro p { max-width: 290px; }.site-footer .footer-cta { margin-top: 1rem; font-weight: 700; }.site-footer .footer-bottom { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 0 1.5rem; border-top: 1px solid var(--line); }.site-footer .footer-bottom p { margin: 0; font-size: .7rem; }.site-footer .brand img { width: 148px; }
:focus-visible { outline: 3px solid rgb(69 89 245 / 28%); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 820px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }.site-footer .footer-intro { grid-column: 1 / -1; }.site-footer .footer-bottom { flex-direction: column; gap: .45rem; } } @media (max-width: 500px) { .site-footer .footer-grid { grid-template-columns: 1fr; gap: 1.7rem; }.site-footer .footer-intro { grid-column: auto; } }

/* Visual rhythm: softer FAQ hierarchy and a photo-led visitor story carousel. */
.faq > h2 { max-width: 580px; font-size: clamp(1.85rem, 3.1vw, 2.85rem); line-height: 1.04; letter-spacing: -.045em; }.visit-stories { background: #fff; }.stories-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 8vw; align-items: end; max-width: 1120px; margin: 0 auto 2rem; }.stories-heading > .eyebrow { margin-bottom: 1.3rem; }.stories-heading h2 { max-width: 680px; margin-bottom: .9rem; }.stories-heading p:not(.eyebrow) { max-width: 560px; margin: 0; color: var(--muted); font-size: 1.03rem; }
.story-carousel { position: relative; min-height: 440px; overflow: hidden; background: var(--ink); border-radius: 18px; box-shadow: 0 18px 38px rgb(24 43 78 / 12%); }.carousel-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; opacity: 0; pointer-events: none; transition: opacity .5s ease; }.carousel-slide.is-active { opacity: 1; pointer-events: auto; }.carousel-slide img { width: 100%; height: 440px; object-fit: cover; filter: saturate(.82) brightness(.85); }.carousel-slide > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4.5rem); color: #fff; background: linear-gradient(135deg, #172340, #0e172b); }.carousel-slide span { color: #aebcff; font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }.carousel-slide h3 { max-width: 380px; margin: 1.15rem 0; font-size: clamp(1.65rem, 3vw, 2.7rem); line-height: 1.04; letter-spacing: -.055em; }.carousel-slide p { max-width: 390px; margin: 0; color: #d3ddf5; }.carousel-controls { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.3rem; display: flex; align-items: center; gap: .65rem; }.carousel-controls > button { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 22%); border-radius: 50%; font-size: 1rem; cursor: pointer; }.carousel-controls > button:hover { background: var(--blue); border-color: var(--blue); }.carousel-controls div { display: flex; gap: .35rem; }.carousel-controls div button { width: 7px; height: 7px; padding: 0; background: rgb(255 255 255 / 38%); border: 0; border-radius: 99px; cursor: pointer; }.carousel-controls div button.is-active { width: 20px; background: #fff; }
@media (max-width: 820px) { .stories-heading { grid-template-columns: 1fr; gap: .3rem; }.stories-heading > .eyebrow { margin-bottom: 0; }.story-carousel { min-height: 590px; }.carousel-slide { grid-template-columns: 1fr; grid-template-rows: 245px 1fr; }.carousel-slide img { height: 245px; }.carousel-slide > div { padding: 2rem 1.5rem 3.8rem; }.carousel-controls { right: 1rem; bottom: 1rem; } } @media (max-width: 500px) { .faq > h2 { font-size: 2rem; }.story-carousel { min-height: 620px; }.carousel-slide { grid-template-rows: 220px 1fr; }.carousel-slide img { height: 220px; }.carousel-slide h3 { font-size: 1.85rem; } }

/* The revised operating flow has three equally weighted steps. */
.workflow ol { grid-template-columns: repeat(3, 1fr); }
.workflow-lead { max-width: 620px; margin: 0 auto 2.5rem; color: #66738a; text-align: center; }.product-showcase { padding-top: 2rem; }.showcase-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin: 0 auto 2rem; }.showcase-heading > p:last-child { max-width: 540px; margin: 0; color: #66738a; }.product-showcase .carousel-slide img { object-fit: contain; background: #edf2fb; filter: none; }.product-showcase .story-carousel { min-height: 500px; }.product-showcase .carousel-slide { grid-template-columns: 1.25fr .75fr; }.product-showcase .carousel-slide img { height: 500px; }.product-showcase .carousel-slide > div { background: linear-gradient(135deg, #172340, #0e172b); }.contact form { display: grid; gap: 1rem; }.contact form label { display: block; color: #53617a; font-size: .82rem; font-weight: 600; }.contact form input, .contact form textarea { display: block; width: 100%; margin-top: .35rem; }.contact form .button { justify-self: start; }
@media (max-width: 820px) { .showcase-heading { display: block; }.showcase-heading > p:last-child { margin-top: 1rem; }.product-showcase .story-carousel { min-height: 610px; }.product-showcase .carousel-slide { grid-template-columns: 1fr; grid-template-rows: 260px 1fr; }.product-showcase .carousel-slide img { height: 260px; } }

/* Keep the page compact while preserving comfortable reading space. */
.hero { min-height: auto; padding-block: clamp(6.5rem, 10vw, 8.5rem) clamp(3.5rem, 5vw, 4.75rem); }
.section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.product-showcase { padding-block: clamp(3rem, 5vw, 4.5rem); }
.image-story { padding-block: clamp(3rem, 5vw, 4.5rem); }
.contact { padding-block: clamp(3.5rem, 6vw, 5rem); }

@media (max-width: 820px) { .hero { padding-block: 6.5rem 3.5rem; }.section, .product-showcase, .image-story, .contact { padding-block: 3.25rem; } }

/* Liquid-glass system: reserve transparency for navigation and interactive surfaces. */
:root { --ink: #1d1d1f; --blue: #075bc7; --paper: #f5f6fa; --mist: #e9edf4; --line: rgb(29 29 31 / 12%); --muted: #4b5563; --glass: rgb(255 255 255 / 68%); --glass-strong: rgb(255 255 255 / 84%); --glass-border: rgb(255 255 255 / 78%); --shadow-glass: 0 12px 36px rgb(15 23 42 / 10%); }
body { background: radial-gradient(circle at 12% 8%, rgb(153 191 255 / 42%), transparent 24rem), radial-gradient(circle at 88% 19%, rgb(190 227 239 / 38%), transparent 25rem), radial-gradient(circle at 52% 82%, rgb(222 214 255 / 28%), transparent 29rem), var(--paper); background-attachment: fixed; }
.site-header { background: var(--glass); border-color: var(--glass-border); border-radius: 20px; box-shadow: var(--shadow-glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.site-header.is-scrolled { top: .5rem; width: min(100% - 2rem, 1240px); background: var(--glass-strong); border-radius: 20px; box-shadow: 0 9px 28px rgb(15 23 42 / 12%); }
.button { min-height: 48px; background: linear-gradient(135deg, #0866da, #0751b2); border-color: rgb(255 255 255 / 34%); border-radius: 999px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 18px rgb(7 91 199 / 24%); }
.button:hover { background: linear-gradient(135deg, #0a70eb, #075bc7); border-color: rgb(255 255 255 / 48%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 10px 22px rgb(7 91 199 / 29%); }
.button-small { border-radius: 999px; }
.text-link { text-underline-offset: .22em; }.text-link:hover { text-decoration-thickness: 2px; }
.hero { background: radial-gradient(circle at 72% 24%, rgb(172 207 255 / 44%), transparent 25rem), linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(238 244 255 / 74%)); }
.hero-visual > img { border: 1px solid var(--glass-border); border-radius: 24px; filter: saturate(.95) brightness(1.03); box-shadow: 0 24px 56px rgb(15 23 42 / 14%); }
.visit-card { background: var(--glass); border-color: var(--glass-border); border-radius: 18px; box-shadow: var(--shadow-glass); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.workflow { background: transparent; }.workflow li, .faq details { background: rgb(255 255 255 / 82%); border-color: rgb(255 255 255 / 74%); box-shadow: 0 8px 24px rgb(15 23 42 / 6%); }
.story-photo img { border: 1px solid var(--glass-border); border-radius: 24px; filter: saturate(.94) brightness(1.03); box-shadow: var(--shadow-glass); }
.product-showcase .story-carousel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-glass); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); }
.product-showcase .carousel-slide > div { color: var(--ink); background: rgb(255 255 255 / 76%); }.carousel-slide span { color: var(--blue); }.carousel-slide p { color: var(--muted); }
.carousel-controls { padding: .35rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: 0 8px 20px rgb(15 23 42 / 10%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.carousel-controls > button { width: 44px; height: 44px; color: var(--ink); background: rgb(255 255 255 / 76%); border-color: rgb(29 29 31 / 12%); }.carousel-controls > button:hover { color: #fff; background: var(--blue); border-color: var(--blue); }.carousel-controls div button { width: 8px; height: 8px; background: rgb(29 29 31 / 26%); }.carousel-controls div button.is-active { background: var(--blue); }
.contact { background: radial-gradient(circle at 80% 15%, rgb(183 219 255 / 44%), transparent 25rem), rgb(237 242 251 / 70%); }.contact form { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-glass); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
input, select, textarea { background: rgb(255 255 255 / 86%); border-color: rgb(29 29 31 / 18%); border-radius: 12px; } input { min-height: 44px; } input:focus, select:focus, textarea:focus { outline-color: rgb(7 91 199 / 30%); border-color: var(--blue); }
:focus-visible { outline-color: rgb(7 91 199 / 45%); }
@supports not (backdrop-filter: blur(1px)) { .site-header, .visit-card, .product-showcase .story-carousel, .carousel-controls, .contact form { background: rgb(255 255 255 / 96%); } }
@media (prefers-reduced-transparency: reduce) { .site-header, .visit-card, .product-showcase .story-carousel, .carousel-controls, .contact form { background: rgb(255 255 255 / 96%); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (max-width: 820px) { body { background-attachment: scroll; }.site-header.is-scrolled { top: 0; width: 100%; border-radius: 0; }.product-showcase .story-carousel, .contact form, .story-photo img { border-radius: 18px; } }

/* Responsive layout: preserve complete product screenshots and scale type by viewport. */
html { scroll-padding-top: 5rem; }
section[id] { scroll-margin-top: 5rem; }
#uvod, #obsah { scroll-margin-top: 0; }
.container { width: min(100% - clamp(2.5rem, 5vw, 5rem), 1320px); }
h1 { max-width: 680px; font-size: clamp(3rem, 5.6vw, 5.75rem); line-height: .93; letter-spacing: -.075em; }
h2 { max-width: 700px; font-size: clamp(2rem, 3.8vw, 3.65rem); line-height: 1; letter-spacing: -.06em; }
.product-showcase .carousel-slide img { object-fit: contain; object-position: center; background: #edf2fb; }

@media (min-width: 1440px) { .hero-visual > img { height: 540px; }.product-showcase .story-carousel { min-height: 540px; }.product-showcase .carousel-slide img { height: 540px; } }

@media (min-width: 821px) and (max-width: 1180px) { .site-header { width: min(100% - 2.5rem, 1080px); }.site-header.is-scrolled { width: min(100% - 2.5rem, 1080px); }.hero-visual > img { height: 430px; }.product-showcase .story-carousel { min-height: 450px; }.product-showcase .carousel-slide img { height: 450px; }.product-showcase .carousel-slide > div { padding: 2rem; }.carousel-slide h3 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); } }

@media (max-width: 820px) { .container { width: min(100% - 2.5rem, 680px); } h1 { max-width: 620px; font-size: clamp(2.7rem, 8vw, 4.25rem); } h2 { max-width: 600px; font-size: clamp(2rem, 6.5vw, 3rem); }.hero { padding-top: 7.5rem; }.hero-visual > img { height: clamp(320px, 56vw, 430px); }.product-showcase .story-carousel { min-height: 570px; }.product-showcase .carousel-slide { grid-template-rows: 250px 1fr; }.product-showcase .carousel-slide img { height: 250px; object-fit: contain; }.product-showcase .carousel-slide > div { padding: 1.75rem 1.5rem 4.4rem; }.carousel-controls { right: 1rem; bottom: 1rem; } }

@media (max-width: 600px) { .container { width: min(100% - 2rem, 540px); } h1 { font-size: clamp(2.55rem, 12vw, 3.5rem); line-height: .95; letter-spacing: -.07em; } h2 { font-size: clamp(1.85rem, 8.8vw, 2.45rem); line-height: 1.04; letter-spacing: -.05em; }.lead { font-size: 1rem; }.actions { align-items: flex-start; }.hero-visual > img { height: 320px; }.workflow ol { gap: 1rem; }.workflow li { padding: 1.35rem; }.product-showcase .story-carousel { min-height: 550px; }.product-showcase .carousel-slide { grid-template-rows: 220px 1fr; }.product-showcase .carousel-slide img { height: 220px; }.carousel-slide h3 { font-size: 1.7rem; }.image-story { gap: 1.75rem; }.contact-grid { gap: 2rem; }.contact form { padding: 1.25rem; }.contact form .button { width: 100%; } }

@media (max-width: 820px) and (orientation: landscape) { .site-header { min-height: 58px; }.hero { padding-top: 6.25rem; }.hero-visual > img { height: 290px; }.product-showcase .story-carousel { min-height: 430px; }.product-showcase .carousel-slide { grid-template-columns: 1.05fr .95fr; grid-template-rows: none; }.product-showcase .carousel-slide img { height: 430px; }.product-showcase .carousel-slide > div { padding: 1.5rem 1.5rem 4rem; }.carousel-slide h3 { margin: .75rem 0; font-size: 1.55rem; }.carousel-slide p { font-size: .92rem; } }

@media (max-width: 420px) { .site-header { width: calc(100% - 1rem); padding: 0 .75rem; }.brand img { max-width: 112px; }.menu-toggle { min-height: 40px; padding-inline: .7rem; } h1 { font-size: 2.5rem; }.hero-visual > img { height: 280px; }.product-showcase .story-carousel { min-height: 530px; }.product-showcase .carousel-slide { grid-template-rows: 195px 1fr; }.product-showcase .carousel-slide img { height: 195px; }.carousel-controls > button { width: 40px; height: 40px; } }

/* FAQ is a reading list, not a single enclosed card. */
.faq { background: transparent; }
.faq details { background: transparent; border: 0; border-bottom: 1px solid rgb(29 29 31 / 14%); border-radius: 0; box-shadow: none; }
.faq details:first-of-type { border-top: 1px solid rgb(29 29 31 / 14%); }
.faq summary { position: relative; padding: 1.2rem 3rem 1.2rem 0; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 0; box-shadow: inset 0 -2px 0 var(--blue); }
.faq summary:focus-visible::after { box-shadow: 0 0 0 4px rgb(7 91 199 / 16%); }
.faq summary::after { position: absolute; top: 50%; right: .25rem; width: 1.5rem; height: 1.5rem; color: var(--blue); border: 1px solid rgb(7 91 199 / 24%); border-radius: 50%; content: "+"; font-size: 1.15rem; font-weight: 500; line-height: 1.35rem; text-align: center; transform: translateY(-50%); transition: transform .2s ease, background .2s ease; }
.faq details[open] summary::after { color: #fff; background: var(--blue); transform: translateY(-50%) rotate(45deg); }
.faq details p { max-width: 700px; padding: 0 3rem 1.3rem 0; }

/* Keep the navigation CTA distinct from ordinary navigation links. */
nav .button, nav .button:hover, nav .button:focus-visible { color: #fff; text-decoration: none; }

/* Tighter vertical rhythm for a shorter one-page experience. */
.section { padding-block: clamp(2.5rem, 4vw, 4rem); }
.product-showcase, .image-story { padding-block: clamp(2.25rem, 3.5vw, 3.5rem); }
.contact { padding-block: clamp(2.75rem, 4vw, 4rem); }
.faq { padding-top: clamp(2.25rem, 3.5vw, 3.25rem); padding-bottom: clamp(2.25rem, 3.5vw, 3.25rem); }
.faq > h2 { margin-bottom: .9rem; }
.faq summary { padding-block: .9rem; }
.faq details p { padding-bottom: 1rem; }

@media (max-width: 600px) { .section, .product-showcase, .image-story, .contact, .faq { padding-block: 2.25rem; }.faq summary { padding-block: .82rem; } }

/* Frame product screenshots so their complete interface is easy to scan. */
.product-showcase .carousel-slide img { box-sizing: border-box; padding: clamp(1rem, 2vw, 1.75rem); background: rgb(255 255 255 / 92%); border: 0; object-fit: contain; object-position: center; }
@media (max-width: 820px) { .product-showcase .carousel-slide img { padding: 1rem; } }
@media (max-width: 420px) { .product-showcase .carousel-slide img { padding: .65rem; } }

/* Dock the header to the viewport once the visitor begins scrolling. */
.site-header.is-scrolled { top: 0; width: 100%; padding-inline: clamp(1.25rem, 4vw, 4rem); border-color: rgb(230 234 242 / 96%); border-radius: 0; }

/* Motion stays on compositor-friendly properties for smooth scrolling. */
.site-header { transition: top .34s cubic-bezier(.22, 1, .36, 1), width .34s cubic-bezier(.22, 1, .36, 1), padding .34s cubic-bezier(.22, 1, .36, 1), border-radius .34s cubic-bezier(.22, 1, .36, 1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease; }
.button, .text-link, .carousel-controls > button { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; }
.reveal { will-change: opacity, transform; transition: opacity .52s cubic-bezier(.22, 1, .36, 1), transform .52s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-visible { will-change: auto; }
.workflow li:nth-child(2), .faq details:nth-of-type(2) { transition-delay: .05s; }.workflow li:nth-child(3), .faq details:nth-of-type(3) { transition-delay: .1s; }.faq details:nth-of-type(4) { transition-delay: .15s; }
.hero::after { animation: hero-drift 16s ease-in-out infinite; will-change: transform; }
.visit-card { animation: card-float 6s ease-in-out infinite; will-change: transform; }
.live-dot { position: relative; }.live-dot::after { position: absolute; inset: -5px; border: 1px solid rgb(54 189 136 / 52%); border-radius: 50%; content: ""; animation: live-pulse 2.6s ease-out infinite; }
@keyframes hero-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14px, -10px, 0); } }
@keyframes card-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } }
@keyframes live-pulse { 0% { opacity: .8; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; }.reveal, .hero::after, .visit-card, .live-dot::after { animation: none !important; transition: none !important; transform: none !important; } }

/* Contact area: a clearer invitation and a compact, approachable form. */
.contact-shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); overflow: hidden; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 28px; box-shadow: var(--shadow-glass); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); }
.contact-copy { position: relative; min-height: 100%; padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; background: transparent; border: 0; border-radius: 0; }
.contact-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.contact-copy h2, .contact-copy > p { position: relative; z-index: 1; max-width: 31rem; }.contact-copy h2 { margin-bottom: 1rem; }.contact-copy .contact-note { margin-top: 1.5rem; color: var(--blue); font-size: .9rem; font-weight: 700; }
.contact-illustration { flex: 0 0 auto; width: clamp(4.5rem, 7vw, 6.5rem); margin: -.5rem -.5rem 0 0; opacity: .95; transform: rotate(5deg); }
.contact form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem; padding: clamp(1.35rem, 3vw, 2.25rem); background: transparent; border: 0; border-left: 1px solid rgb(29 29 31 / 10%); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.contact form .form-intro, .contact form label:nth-of-type(3), .contact form label:nth-of-type(4), .contact form .button, .contact form .form-status { grid-column: 1 / -1; }.form-intro { margin: 0 0 .15rem; color: var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.contact form label { color: #45516a; }.contact form textarea { min-height: 7.5rem; resize: vertical; }.contact form input, .contact form textarea { padding: .75rem .9rem; background: rgb(255 255 255 / 90%); border-color: rgb(29 29 31 / 14%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%); }
.contact form input::placeholder, .contact form textarea::placeholder { color: #a5adba; opacity: 1; }.contact form .button { padding-inline: 1.35rem; }.contact form .form-status { margin: -.1rem 0 0; }
@media (max-width: 820px) { .contact-shell { grid-template-columns: 1fr; border-radius: 20px; }.contact-copy { min-height: 0; }.contact-illustration { width: 5.5rem; }.contact form { grid-template-columns: 1fr; border-top: 1px solid rgb(29 29 31 / 10%); border-left: 0; }.contact form .form-intro, .contact form label:nth-of-type(3), .contact form label:nth-of-type(4), .contact form .button, .contact form .form-status { grid-column: auto; } }
@media (max-width: 420px) { .contact-illustration { width: 4.5rem; margin-top: -.25rem; } }
@supports not (backdrop-filter: blur(1px)) { .contact-shell { background: rgb(255 255 255 / 96%); } }
@media (prefers-reduced-transparency: reduce) { .contact-shell { background: rgb(255 255 255 / 96%); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Use the same calm white glass surface for the product carousel and contact panel. */
.product-showcase .story-carousel { background: radial-gradient(circle at 88% 14%, rgb(183 219 255 / 42%), transparent 22rem), rgb(255 255 255 / 92%); border-color: var(--glass-border); }
.product-showcase .carousel-slide > div { background: transparent; }
.contact-illustration { width: clamp(6.5rem, 10vw, 9rem); opacity: .42; filter: saturate(.82); }
@media (max-width: 820px) { .contact-illustration { width: 7rem; opacity: .4; } }
@media (max-width: 420px) { .contact-illustration { width: 5.75rem; opacity: .36; } }

/* Native dialog keeps confirmation accessible for keyboard and screen-reader users. */
.contact-dialog { width: min(100% - 2rem, 29rem); padding: 0; color: var(--ink); background: rgb(255 255 255 / 94%); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 24px 72px rgb(15 23 42 / 24%); }.contact-dialog::backdrop { background: rgb(16 29 53 / 30%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }.contact-dialog form { position: relative; padding: clamp(1.5rem, 5vw, 2.25rem); text-align: center; }.contact-dialog h2 { margin: 1rem auto .75rem; font-size: clamp(1.8rem, 7vw, 2.45rem); }.contact-dialog p { max-width: 23rem; margin: 0 auto 1.5rem; color: var(--muted); }.dialog-mark { display: grid; width: 3rem; height: 3rem; margin: 0 auto; place-items: center; color: #fff; background: linear-gradient(135deg, #1683e8, var(--blue)); border-radius: 50%; box-shadow: 0 8px 18px rgb(7 91 199 / 22%); font-size: 1.45rem; font-weight: 700; }.dialog-close { position: absolute; top: .8rem; right: .8rem; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--muted); background: rgb(255 255 255 / 72%); border: 1px solid rgb(29 29 31 / 10%); border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; }.dialog-close:hover { color: var(--ink); background: #fff; }
@media (prefers-reduced-transparency: reduce) { .contact-dialog { background: #fff; }.contact-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* One quiet motion language across the page. */
@media (prefers-reduced-motion: no-preference) {
  .workflow li, .faq details, .contact-shell, .story-photo img { transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease, background-color .28s ease; }
  .workflow li:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 14px 30px rgb(15 23 42 / 10%); }
  .faq details:hover { background: rgb(255 255 255 / 46%); border-color: rgb(7 91 199 / 24%); }
  .faq details[open] { background: rgb(255 255 255 / 32%); }
  .contact-shell:hover { box-shadow: 0 18px 42px rgb(15 23 42 / 13%); }
  .story-photo:hover img { transform: scale(1.015); }
  .button:hover { transform: translate3d(0, -2px, 0); }
  .text-link { display: inline-block; transition: transform .18s ease, color .18s ease; }
  .text-link:hover { transform: translate3d(3px, 0, 0); }
  .product-showcase .carousel-slide.is-active img { animation: product-screen-in .5s cubic-bezier(.22, 1, .36, 1); }
  .contact-dialog[open] { animation: dialog-in .34s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes product-screen-in { from { opacity: .55; transform: translate3d(10px, 0, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes dialog-in { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .workflow li, .faq details, .contact-shell, .story-photo img, .product-showcase .carousel-slide.is-active img, .contact-dialog[open] { animation: none !important; transition: none !important; transform: none !important; } }

/* Persistent but unobtrusive page navigation. */
.back-to-top { position: fixed; z-index: 12; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); display: inline-flex; height: 3.35rem; padding: .35rem .4rem .35rem 1.05rem; align-items: center; gap: .7rem; color: #fff; visibility: hidden; background: linear-gradient(135deg, rgb(22 131 232 / 90%), rgb(7 91 199 / 84%)); border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 12px 26px rgb(7 91 199 / 24%); cursor: pointer; opacity: 0; transform: translate3d(0, .75rem, 0); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); transition: opacity .22s ease, transform .22s ease, visibility .22s ease, box-shadow .22s ease, background .22s ease; }.back-to-top.is-visible { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); }.back-to-top:hover { background: linear-gradient(135deg, #1683e8, var(--blue)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%), 0 16px 30px rgb(7 91 199 / 30%); transform: translate3d(0, -2px, 0); }.back-to-top-label { font: 700 .82rem/1 var(--sans); }.back-to-top-icon { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; color: var(--blue); background: rgb(255 255 255 / 92%); border: 1px solid rgb(255 255 255 / 62%); border-radius: 50%; box-shadow: 0 3px 10px rgb(7 50 120 / 14%); font-size: 1.25rem; font-weight: 500; line-height: 1; }
.site-footer a.developer-credit { display: inline-flex; width: auto; align-items: center; gap: .35rem; margin: 0; color: var(--muted); font: 400 .7rem/1.25 var(--sans); text-decoration: none; }.developer-credit:hover span { color: var(--blue); }.developer-credit img { width: 3.35rem; height: auto; margin-left: .2rem; filter: grayscale(1) brightness(0); opacity: .82; }.developer-credit:hover img { opacity: 1; }
@media (max-width: 820px) { .developer-credit { order: 3; }.back-to-top { right: 1rem; bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; }.back-to-top:hover { transform: none; } }

.back-to-top-icon { position: relative; display: block; width: 2.15rem; height: 2.15rem; color: transparent; background: rgb(255 255 255 / 86%); border: 2px solid rgb(7 91 199 / 88%); border-radius: 50%; box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 2px 8px rgb(7 91 199 / 14%); transform: none; }
.back-to-top-icon::before { position: absolute; top: .53rem; left: 50%; width: 2px; height: 1rem; background: var(--blue); content: ""; transform: translateX(-50%); }
.back-to-top-icon::after { position: absolute; top: .42rem; left: 50%; width: .58rem; height: .58rem; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); content: ""; transform: translateX(-50%) rotate(45deg); }

/* A lightweight page-shaped placeholder remains visible until all assets are ready. */
.page-loader { display: none; }
.js .page-loader { position: fixed; z-index: 100; inset: 0; display: block; padding: clamp(1rem, 2vw, 2rem); overflow: hidden; background: radial-gradient(circle at 12% 8%, rgb(153 191 255 / 42%), transparent 24rem), radial-gradient(circle at 88% 19%, rgb(190 227 239 / 38%), transparent 25rem), var(--paper); opacity: 1; transition: opacity .25s ease, visibility .25s ease; }
.is-loaded .page-loader { visibility: hidden; opacity: 0; pointer-events: none; }
.page-loader__header { display: flex; width: min(100%, 1240px); min-height: 68px; margin: 0 auto; padding: 0 1.4rem; align-items: center; gap: 2rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--shadow-glass); }
.page-loader__header .skeleton--button { margin-left: auto; }.skeleton { display: block; background: linear-gradient(100deg, rgb(218 225 237 / 80%) 25%, rgb(255 255 255 / 82%) 42%, rgb(218 225 237 / 80%) 58%); background-size: 240% 100%; border-radius: 999px; animation: skeleton-shimmer 1.5s ease-in-out infinite; }.skeleton--logo { width: 148px; height: 28px; }.skeleton--nav { width: 58px; height: 12px; }.skeleton--button { width: 148px; height: 40px; }.page-loader__hero { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 1240px); margin: clamp(5rem, 10vw, 8.5rem) auto 0; align-items: center; gap: clamp(2.5rem, 6vw, 7rem); }.page-loader__copy { display: grid; gap: 1rem; }.skeleton--eyebrow { width: 240px; height: 14px; }.skeleton--title { width: min(100%, 620px); height: clamp(3.3rem, 6vw, 5.6rem); border-radius: 1rem; }.skeleton--title-short { width: 72%; }.skeleton--text { width: min(100%, 530px); height: 16px; }.skeleton--text-short { width: 78%; }.skeleton--cta { width: 172px; height: 48px; margin-top: .75rem; }.skeleton--image { width: 100%; height: clamp(320px, 38vw, 540px); border-radius: 24px; }.page-loader__label { position: absolute; bottom: 1.5rem; left: 50%; color: var(--muted); font-size: .78rem; font-weight: 600; transform: translateX(-50%); }
@keyframes skeleton-shimmer { to { background-position: -140% 0; } }
@media (max-width: 820px) { .page-loader__header { gap: 1rem; padding-inline: 1rem; }.page-loader__header .skeleton--nav { display: none; }.page-loader__header .skeleton--button { width: 84px; }.page-loader__hero { grid-template-columns: 1fr; margin-top: 4.5rem; gap: 2.5rem; }.skeleton--image { height: 260px; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .js .page-loader { transition: none; } }

/* Responsive composition: switch content before two columns become cramped. */
@media (min-width: 821px) and (max-width: 1080px) {
  .container { width: min(100% - 3rem, 960px); }
  .site-header { gap: 1.25rem; }
  nav { gap: 1.15rem; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(19rem, .8fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .hero h1 { font-size: clamp(3.35rem, 6vw, 4.6rem); }
  .hero-visual > img { height: 410px; }
  .visit-card { right: .75rem; bottom: .75rem; width: min(92%, 300px); }
  .product-showcase .carousel-slide { grid-template-columns: 1.1fr .9fr; }
  .product-showcase .carousel-slide > div { padding: 1.75rem; }
  .contact-shell { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hero h1, .lead { max-width: 680px; }
  .hero-visual { width: min(100%, 680px); }
  .hero-visual > img { height: clamp(340px, 58vw, 470px); }
  .image-story { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .image-story .story-photo { width: min(100%, 680px); }
  .page-loader__hero { grid-template-columns: minmax(0, 1fr); width: min(100%, 680px); margin-top: 4.5rem; gap: 2.5rem; }
  .page-loader__header { width: min(100%, 960px); }
}

@media (max-width: 820px) {
  .site-header { gap: .75rem; }
  .menu-toggle { display: inline-flex; min-height: 42px; padding: .55rem .85rem; align-items: center; justify-content: center; border-radius: 999px; font: 700 .78rem var(--sans); cursor: pointer; }
  .site-header nav { position: absolute; top: calc(100% + .55rem); right: 0; left: 0; display: none; padding: .7rem; flex-direction: column; align-items: stretch; gap: .15rem; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-glass); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: .75rem .85rem; border-radius: 9px; font-size: .9rem; }
  .site-header nav .button { width: 100%; margin-top: .35rem; }
  .contrast-grid, .contact-shell { grid-template-columns: minmax(0, 1fr); }
  .contrast-grid { gap: 1.75rem; }
  .contrast-grid > :first-child, .contrast-grid > :last-child { text-align: left; }
  .contrast-grid > :first-child h2 { margin-left: 0; }
  .workflow ol { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .workflow-lead { margin-bottom: 2rem; text-align: left; }
  .workflow .container > h2 { text-align: left; }
  .product-showcase .carousel-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: 240px 1fr; }
  .product-showcase .carousel-slide img { height: 240px; }
  .product-showcase .story-carousel { min-height: 560px; }
  .product-showcase .carousel-slide > div { padding: 1.6rem 1.5rem 4.6rem; }
  .showcase-heading { gap: 1rem; }
  .contact-copy, .contact form { padding: 1.5rem; }
}

@media (max-width: 600px) {
  .container { width: min(100% - 2rem, 540px); }
  .site-header { width: calc(100% - 1rem); min-height: 60px; padding-inline: .8rem; }
  .site-header.is-scrolled { padding-inline: 1rem; }
  .brand img { width: min(128px, 38vw); }
  .hero { padding-top: 6.75rem; }
  .hero-visual > img { height: clamp(280px, 84vw, 360px); }
  .visit-card { right: .65rem; bottom: .65rem; width: min(92%, 285px); padding: .8rem; }
  .actions { display: flex; width: 100%; flex-direction: column; gap: 1rem; }
  .actions .button { width: 100%; }
  .product-showcase .story-carousel { min-height: 540px; }
  .product-showcase .carousel-slide { grid-template-rows: 205px 1fr; }
  .product-showcase .carousel-slide img { height: 205px; }
  .carousel-controls { right: .75rem; bottom: .75rem; }
  .contact-heading { gap: .5rem; }
  .contact-illustration { display: none; }
  .page-loader__header { min-height: 60px; padding-inline: .8rem; }
  .page-loader__header .skeleton--logo { width: 128px; }
  .page-loader__hero { margin-top: 3.5rem; }
  .skeleton--image { height: 230px; }
}

/* Keep primary navigation within reach on touch devices without relying on scroll JavaScript. */
@media (max-width: 820px) {
  .site-header, .site-header.is-scrolled { position: fixed; z-index: 90; top: 0; right: 0; left: 0; width: 100%; min-height: 60px; padding-top: env(safe-area-inset-top, 0); border-radius: 0; }
  .site-header nav { top: calc(100% + .4rem); right: .75rem; left: .75rem; }
}

/* Accessible heading that stays out of the visual composition. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip-path: inset(50%); white-space: nowrap; }

/* Cookie consent: one anchored glass surface, three equally reachable choices. */
.cookie-bar { position: fixed; z-index: 14; right: 0; bottom: 0; left: 0; width: min(100% - 2.5rem, 1180px); margin: 0 auto clamp(1rem, 2vw, 1.5rem); padding: clamp(1.15rem, 2.4vw, 1.5rem); background: rgb(255 255 255 / 93%); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--shadow-glass), 0 22px 54px rgb(15 23 42 / 14%); backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); }
.cookie-bar[hidden] { display: none; }
.cookie-bar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.cookie-bar h2 { max-width: none; margin: 0 0 .4rem; font-size: .95rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.cookie-bar p { max-width: 62ch; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.cookie-bar p a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.button-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .72rem 1.1rem; color: var(--ink); background: rgb(255 255 255 / 72%); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: 0 4px 12px rgb(15 23 42 / 8%); font: 600 .82rem var(--sans); text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.button-ghost:hover { background: #fff; border-color: rgb(7 91 199 / 32%); transform: translateY(-1px); }

/* Keep the back-to-top control clear of the bar while a decision is pending. */
body.has-cookie-bar .back-to-top { bottom: calc(clamp(1rem, 2vw, 2rem) + var(--cookie-bar-height, 7rem)); }

/* Nested settings window reuses the dialog language of the contact confirmation. */
.cookie-dialog { width: min(100% - 2rem, 41rem); max-height: min(85vh, 46rem); padding: 0; overflow: hidden; color: var(--ink); background: rgb(255 255 255 / 96%); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 24px 72px rgb(15 23 42 / 24%); }
.cookie-dialog::backdrop { background: rgb(16 29 53 / 34%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cookie-dialog__form { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: inherit; }
.cookie-dialog__head { position: relative; padding: 1.5rem clamp(1.25rem, 4vw, 1.9rem) 0; }
.cookie-dialog h2 { max-width: none; margin: 0 2.5rem .35rem 0; font-size: clamp(1.25rem, 4vw, 1.6rem); line-height: 1.15; }
.cookie-dialog__head p { margin: 0; color: var(--muted); font-size: .84rem; }
.cookie-dialog__close { position: absolute; top: 1.1rem; right: clamp(1rem, 4vw, 1.4rem); display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--muted); background: rgb(255 255 255 / 70%); border: 1px solid var(--glass-border); border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.cookie-dialog__close:hover { color: var(--ink); background: #fff; }
.cookie-tabs { display: flex; gap: .35rem; padding: 1rem clamp(1.25rem, 4vw, 1.9rem) 0; border-bottom: 1px solid var(--line); }
.cookie-tabs button { padding: .6rem .85rem; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; font: 600 .74rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cookie-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.cookie-panels { overflow-y: auto; padding: .35rem clamp(1.25rem, 4vw, 1.9rem) 1.25rem; }
.cookie-panel[hidden] { display: none; }
.cookie-panel h3 { margin: 1.25rem 0 .4rem; font-size: .95rem; font-weight: 700; }
.cookie-panel > p { margin: 0 0 .75rem; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.cookie-group { margin-top: .8rem; padding: .9rem 1rem; background: rgb(255 255 255 / 74%); border: 1px solid var(--glass-border); border-radius: 14px; }
.cookie-group__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-group__head b { font-size: .9rem; font-weight: 700; }
.cookie-group__head small { display: block; margin-top: .15rem; color: var(--muted); font-size: .74rem; font-weight: 500; }
.cookie-group p { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.58; }
.cookie-group ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.cookie-switch { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 46px; height: 26px; min-height: 0; margin: 0; padding: 0; background: #c9d2e2; border: 0; border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background .2s ease; }
.cookie-switch::after { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgb(15 23 42 / 24%); content: ""; transition: transform .2s ease; }
.cookie-switch:checked { background: var(--blue); }
.cookie-switch:checked::after { transform: translateX(20px); }
.cookie-switch:disabled { background: #a8c4ea; cursor: not-allowed; }
.cookie-switch:focus-visible { outline: 3px solid rgb(7 91 199 / 30%); outline-offset: 2px; }
.cookie-dialog__foot { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem clamp(1.25rem, 4vw, 1.9rem) 1.35rem; background: rgb(255 255 255 / 82%); border-top: 1px solid var(--line); }
.cookie-dialog__foot .button, .cookie-dialog__foot .button-ghost { flex: 1 1 9rem; }

/* Keep form feedback legible without competing with the primary action. */
.contact form .form-status { display: block; margin: .2rem 0 0; padding: .55rem 0 .55rem .8rem; color: var(--muted); background: transparent; border: 0; border-left: 2px solid rgb(7 91 199 / 42%); border-radius: 0; font-size: .8rem; font-weight: 600; line-height: 1.5; }
.contact form .form-status[data-state="info"] { display: none; }
.contact form .form-status[data-state="sending"] { color: #6d5518; border-left-color: #bd8610; }
.contact form .form-status[data-state="success"] { color: #23734a; border-left-color: #218a58; }
.contact form .form-status[data-state="error"] { color: #a13740; border-left-color: #c83d48; }


@media (max-width: 820px) { .cookie-bar { width: min(100% - 1.5rem, 680px); border-radius: 18px; }.cookie-bar__inner { grid-template-columns: 1fr; gap: 1rem; }.cookie-actions .button, .cookie-actions .button-ghost { flex: 1 1 100%; } }
@media (max-width: 600px) { .cookie-bar { padding: 1rem; }.cookie-bar__inner { gap: .85rem; }.cookie-bar p { font-size: .8rem; line-height: 1.5; }.cookie-actions { gap: .45rem; }.cookie-actions .button, .cookie-actions .button-ghost { min-height: 44px; }.cookie-tabs { gap: 0; }.cookie-tabs button { flex: 1 1 auto; padding-inline: .35rem; font-size: .68rem; } }
@media (prefers-reduced-transparency: reduce) { .cookie-bar, .cookie-dialog { background: rgb(255 255 255 / 98%); backdrop-filter: none; -webkit-backdrop-filter: none; }.cookie-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: no-preference) { .cookie-bar { animation: cookie-bar-in .4s cubic-bezier(.22, 1, .36, 1); }.cookie-dialog[open] { animation: dialog-in .34s cubic-bezier(.22, 1, .36, 1); } }
@media (prefers-reduced-motion: reduce) { .cookie-bar, .cookie-dialog[open], .cookie-switch, .cookie-switch::after, .button-ghost { animation: none !important; transition: none !important; } }
@keyframes cookie-bar-in { from { opacity: 0; transform: translate3d(0, 1.25rem, 0); } to { opacity: 1; transform: none; } }
.footer-bottom .cookie-link { padding: 0; color: var(--muted); background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.footer-bottom .cookie-link:hover { color: var(--blue); }

/* ==========================================================================
   Layout grid: one content column that the header, page and cookie bar share.
   Floating surfaces are wider than the column by exactly their own padding,
   so their inner content lands on the same left and right edge as the page.
   ========================================================================== */
:root { --gutter: clamp(2.5rem, 5vw, 5rem); --content-max: 1320px; --shell-pad: 1.4rem; --bar-pad: 1.5rem; }
@media (max-width: 1180px) { :root { --content-max: 1080px; --gutter: 2.5rem; } }
@media (max-width: 820px) { :root { --content-max: 680px; --gutter: 2.5rem; --shell-pad: 1rem; --bar-pad: 1rem; } }
@media (max-width: 600px) { :root { --content-max: 540px; --gutter: 2rem; --shell-pad: .75rem; --bar-pad: .75rem; } }

.container { width: min(100% - var(--gutter), var(--content-max)); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: center; width: min(calc(100% - var(--gutter) + 2 * var(--shell-pad)), calc(var(--content-max) + 2 * var(--shell-pad))); padding-inline: var(--shell-pad); }
.site-header.is-scrolled { width: 100%; }
.site-header__inner { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 2rem; max-width: var(--content-max); }
@media (max-width: 820px) { .site-header__inner { gap: .75rem; } }

.cookie-bar { width: min(calc(100% - var(--gutter) + 2 * var(--bar-pad)), calc(var(--content-max) + 2 * var(--bar-pad))); padding-inline: var(--bar-pad); }
.cookie-bar__grid { max-width: var(--content-max); margin-inline: auto; }
.page-loader__header, .page-loader__hero { width: min(100% - var(--gutter), var(--content-max)); margin-inline: auto; padding-inline: 0; }

/* Display headings: Czech diacritics need the extra leading at large sizes. */
h1 { line-height: 1; }
@media (max-width: 600px) { h1 { line-height: 1.04; } }

/* The footer's next step is an action, so it looks like one. */
.site-footer a.footer-cta { display: inline-flex; width: auto; align-items: center; justify-content: center; min-height: 44px; margin-top: 1.15rem; padding: .7rem 1.25rem; color: #fff; background: linear-gradient(135deg, #0866da, #0751b2); border: 1px solid rgb(255 255 255 / 34%); border-radius: 999px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 18px rgb(7 91 199 / 24%); font: 600 .82rem/1 var(--sans); text-decoration: none; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; }
.site-footer a.footer-cta:hover { color: #fff; background: linear-gradient(135deg, #0a70eb, #075bc7); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 10px 22px rgb(7 91 199 / 29%); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .site-footer a.footer-cta { transition: none; }.site-footer a.footer-cta:hover { transform: none; } }

/* Cookie panels: Souhlas explains the decision, Detaily carries the switches. */
.cookie-panel .cookie-lead { margin: .9rem 0 1rem; color: var(--ink); font-size: .88rem; line-height: 1.6; }
.cookie-meaning { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1rem; margin: 0 0 .35rem; padding: 1rem 1.1rem; background: rgb(255 255 255 / 74%); border: 1px solid var(--glass-border); border-radius: 14px; }
.cookie-meaning dt { color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.cookie-meaning dd { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.cookie-list { display: grid; gap: .55rem; margin: .85rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.cookie-list li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; gap: .15rem .9rem; }
.cookie-list code { color: var(--blue); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .76rem; overflow-wrap: anywhere; }
.cookie-list span { color: var(--ink); font-size: .8rem; line-height: 1.5; }
.cookie-list small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.cookie-list li:has(> span:first-child) span { grid-column: 1 / -1; color: var(--muted); }
.cookie-note { margin: 1.1rem 0 0; padding: .85rem 1rem; color: var(--muted); background: rgb(7 91 199 / 5%); border: 1px solid rgb(7 91 199 / 14%); border-radius: 12px; font-size: .78rem; line-height: 1.6; }
@media (max-width: 600px) { .cookie-meaning { grid-template-columns: 1fr; gap: .1rem; }.cookie-meaning dd { margin-bottom: .5rem; }.cookie-list li { grid-template-columns: 1fr; }.cookie-list small { grid-column: 1; } }

/* Zvýraznění v displejovém nadpisu je modré a stojaté, ne kurzivní.
   Pravidlo není vázané na hero, aby platilo i mimo úvodní sekci. */
h1 em { color: var(--blue); font-style: normal; }

/* ==========================================================================
   Typografická škála: sedm kroků. Dřívější blízké velikosti (0,68 / 0,7 /
   0,75 / 0,8 / 0,82 rem) se slévají do dvou - "small" a "micro".
   ========================================================================== */
:root { --text-lead: 1.08rem; --text-body: 1rem; --text-small: .82rem; --text-micro: .72rem; }
.eyebrow { font-size: var(--text-micro); }
.site-footer h3, .site-footer a:not(.brand), .site-footer div > p { font-size: var(--text-small); }
.site-footer .footer-bottom p, .site-footer a.developer-credit { font-size: var(--text-micro); }
.site-footer a.developer-credit { font-size: var(--text-micro); line-height: 1.25; }
.workflow li b { font-size: var(--text-micro); }
.form-status { font-size: var(--text-small); }
.doc-caption, .carousel-slide > div > span { font-size: var(--text-micro); }

/* Ikony: Lucide, 24×24, tah 2, zaoblené konce. Dědí barvu textu. */
.icon { display: block; flex: 0 0 auto; width: 1.25em; height: 1.25em; }
.button .icon, .button-ghost .icon { width: 1.15em; height: 1.15em; }

/* FAQ: v otevřeném stavu potřebuje podbarvení vnitřní okraj. */
.faq details { padding-inline: 1.15rem; }
.faq summary { padding: 1.05rem 3rem 1.05rem 0; }
.faq details p { max-width: 62ch; margin: 0; padding: 0 3rem 1.25rem 0; }
.faq summary::after { content: none; }
.faq-icon { position: absolute; top: 50%; right: 0; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--blue); border: 1px solid rgb(7 91 199 / 24%); border-radius: 50%; transform: translateY(-50%); transition: transform .22s ease, background-color .22s ease, color .22s ease; }
.faq details[open] .faq-icon { color: #fff; background: var(--blue); transform: translateY(-50%) rotate(180deg); }
.faq summary:focus-visible .faq-icon { box-shadow: 0 0 0 4px rgb(7 91 199 / 16%); }
.faq details:hover, .faq details[open] { background: rgb(255 255 255 / 55%); }
@media (max-width: 600px) { .faq details { padding-inline: .85rem; }.faq summary { padding: .95rem 2.6rem .95rem 0; }.faq details p { padding: 0 1rem 1.1rem 0; } }
@media (prefers-reduced-motion: reduce) { .faq-icon { transition: none; } }

/* Ikonové tlačítko Nahoru a ovladače karuselu nesou SVG místo znaků. */
.back-to-top-icon { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; color: var(--blue); background: rgb(255 255 255 / 92%); border: 1px solid rgb(255 255 255 / 62%); border-radius: 50%; box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%), 0 2px 8px rgb(7 91 199 / 14%); transform: none; }
.back-to-top-icon::before, .back-to-top-icon::after { content: none; }
.carousel-controls > button { display: grid; place-items: center; font-size: 0; }
.dialog-close, .cookie-dialog__close { display: grid; place-items: center; font-size: 0; }
.dialog-mark { display: grid; place-items: center; }
.menu-toggle { display: none; align-items: center; gap: .4rem; }
@media (max-width: 820px) { .menu-toggle { display: inline-flex; } }

/* Patička: sloupce lícují nahoře, spodní řádek je tříbodová mřížka. */
.site-footer .footer-grid { align-items: start; }
.site-footer .footer-intro { align-self: start; }
.site-footer .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-footer .footer-bottom > :last-child { text-align: right; }
.site-footer a.developer-credit { justify-self: center; }
@media (max-width: 820px) { .site-footer .footer-bottom { grid-template-columns: 1fr; justify-items: start; gap: .5rem; }.site-footer .footer-bottom > :last-child { text-align: left; }.site-footer a.developer-credit { justify-self: start; } }
/* Ikony v tlačítkách s potlačeným textem potřebují absolutní velikost. */
.carousel-controls > button .icon, .dialog-close .icon, .cookie-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.dialog-mark .icon { width: 1.6rem; height: 1.6rem; }

/* Tlačítko Nahoru vlastní pravý dolní roh okna, proto ovladače karuselu
   sedí vlevo. Dřív se obě plochy při určité pozici scrollu překrývaly. */
.carousel-controls { right: auto; left: clamp(1rem, 2vw, 1.75rem); }
@media (max-width: 820px) { .carousel-controls { right: auto; left: 1rem; } }
@media (max-width: 420px) { .carousel-controls { right: auto; left: .75rem; } }

/* Tlačítko Nahoru je primární akce, takže používá stejný gradient jako
   .button. Dřívější světlejší odstín a průsvitnost byly nechtěný posun -
   kontrast bílého popisku navíc závisel na tom, co se pod tlačítkem posouvá. */
.back-to-top { background: linear-gradient(135deg, #0866da, #0751b2); border-color: rgb(255 255 255 / 34%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 12px 26px rgb(7 91 199 / 24%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.back-to-top:hover { background: linear-gradient(135deg, #0a70eb, #075bc7); box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 16px 30px rgb(7 91 199 / 30%); }

/* Uzavírací věta postupu: nese sdělení zrušené sekce s fotografií. */
.workflow-close { max-width: 62ch; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.6; text-align: center; }

/* Ovladače karuselu zpět vpravo - vlevo se překrývaly se snímkem. */
.carousel-controls { right: clamp(1rem, 2vw, 1.75rem); left: auto; }
@media (max-width: 820px) { .carousel-controls { right: 1rem; left: auto; } }
@media (max-width: 420px) { .carousel-controls { right: .75rem; left: auto; } }

/* ==========================================================================
   Skeleton loaderu kopíruje skutečné rozměry hlavičky a hero sekce:
   logo 148×39, tlačítko 153×48 s pilulkou, nadpis tři řádky, perex tři
   řádky, akce = tlačítko 160×48 + textový odkaz, obrázek 540 px / 24 px.
   ========================================================================== */
.page-loader__header { width: min(calc(100% - var(--gutter) + 2 * var(--shell-pad)), calc(var(--content-max) + 2 * var(--shell-pad))); min-height: 68px; padding-inline: var(--shell-pad); border-radius: 20px; gap: 2rem; }
.page-loader__nav { display: flex; align-items: center; gap: 1.15rem; margin-left: auto; }
.page-loader__hero { grid-template-columns: minmax(0, 1fr) minmax(19rem, .8fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(3.5rem, 7.4vw, 6.75rem); }
.page-loader__copy { display: block; }
.page-loader__actions { display: flex; align-items: center; gap: 1.25rem; }

.skeleton--logo { width: 148px; height: 39px; border-radius: 8px; }
.skeleton--nav { width: 48px; height: 13px; }
.skeleton--button { width: 153px; height: 48px; margin-left: 0; border-radius: 999px; }
.skeleton--eyebrow { width: min(324px, 100%); height: 14px; margin-bottom: 12px; }
.skeleton--title { width: 100%; max-width: 660px; height: 62px; margin-bottom: 18px; border-radius: 14px; }
.skeleton--title-2 { width: min(96%, 634px); }
.skeleton--title-short { width: min(40%, 264px); margin-bottom: 24px; }
.skeleton--text { width: 100%; max-width: 560px; height: 16px; margin-bottom: 12px; border-radius: 6px; }
.skeleton--text-short { width: min(66%, 370px); margin-bottom: 29px; }
.skeleton--cta { width: 160px; height: 48px; margin-top: 0; }
.skeleton--link { width: 165px; height: 14px; border-radius: 6px; }
.skeleton--image { width: 100%; height: clamp(320px, 38vw, 540px); border-radius: 24px; }

@media (max-width: 820px) {
  .page-loader__header { gap: 1rem; }
  .page-loader__header .skeleton--nav { display: none; }
  .page-loader__header .skeleton--button { width: 96px; height: 42px; }
  .page-loader__hero { grid-template-columns: minmax(0, 1fr); margin-top: clamp(3rem, 9vw, 4.5rem); gap: 2.5rem; }
  .skeleton--title { height: 44px; margin-bottom: 12px; border-radius: 10px; }
  .skeleton--title-short { margin-bottom: 20px; }
  .skeleton--image { height: 320px; }
}
@media (max-width: 600px) {
  .skeleton--logo { width: 128px; height: 34px; }
  .skeleton--title { height: 38px; }
  .skeleton--cta { width: 100%; max-width: 100%; }
  .page-loader__actions { flex-wrap: wrap; gap: .85rem; }
  .skeleton--image { height: 280px; }
}
/* Loader nesmí mít vodorovný padding, jinak se šířky počítají z jiné základny
   než na skutečné stránce a hlavička i hero vyjdou užší. */
.js .page-loader { padding-inline: 0; padding-block: clamp(1rem, 2vw, 2rem); }
@media (max-width: 420px) {
  .page-loader__header { min-height: 60px; }
  .page-loader__header .skeleton--logo { width: 112px; height: 29px; }
  .page-loader__header .skeleton--button { width: 86px; height: 42px; }
}

/* ==========================================================================
   Karta akce nahrazuje ilustrační fotografii v hero sekci. Ukazuje údaje,
   které o akci drží systém: stav prodeje, termín, místo, obsazenost a ceny.
   ========================================================================== */
.hero-visual { display: grid; place-items: center; padding: clamp(1.5rem, 3vw, 2.75rem); background: radial-gradient(120% 95% at 78% 12%, rgb(153 191 255 / 38%), rgb(153 191 255 / 0) 72%), linear-gradient(150deg, rgb(255 255 255 / 72%), rgb(232 239 252 / 82%)); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-glass); }
.hero-visual > img { display: none; }

.event-card { display: grid; gap: 1.15rem; width: min(100%, 26rem); padding: clamp(1.25rem, 2.2vw, 1.75rem); color: var(--ink); background: rgb(255 255 255 / 96%); border: 1px solid var(--glass-border); border-radius: 18px; box-shadow: 0 18px 44px rgb(15 23 42 / 12%); text-align: left; }
.event-card__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.event-card__status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem .3rem .5rem; color: #0f7a55; background: rgb(28 166 117 / 12%); border-radius: 999px; font-size: var(--text-micro); font-weight: 700; }
.event-card__status .live-dot { position: relative; width: 7px; height: 7px; margin: 0; background: #1ca675; box-shadow: none; }
.event-card__status .live-dot::after { content: none; }
.event-card__date { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--text-micro); font-weight: 600; }
.event-card__date .icon { width: .95rem; height: .95rem; }
.event-card__kicker { margin: 0; color: var(--blue); font-size: var(--text-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.event-card__title { max-width: none; margin: -.75rem 0 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.event-card__meta { display: grid; gap: .7rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.event-card__meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.event-card__meta dt { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: var(--text-small); }
.event-card__meta dt .icon { width: .95rem; height: .95rem; transform: translateY(2px); }
.event-card__meta dd { margin: 0; font-size: var(--text-small); font-weight: 600; text-align: right; }
.event-card__capacity { display: grid; gap: .45rem; }
.event-card__capacity-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.event-card__capacity-head span { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: var(--text-small); }
.event-card__capacity-head .icon { width: .95rem; height: .95rem; }
.event-card__capacity-head b { font-size: var(--text-small); font-weight: 600; }
.event-card__bar { height: 6px; overflow: hidden; background: var(--mist); border-radius: 999px; }
.event-card__bar i { display: block; height: 100%; background: linear-gradient(90deg, #0866da, #0751b2); border-radius: 999px; }
.event-card__foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.event-card__price { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: var(--text-small); }
.event-card__price .icon { width: .95rem; height: .95rem; color: var(--blue); }
@media (max-width: 820px) { .hero-visual { padding: 1.25rem; border-radius: 20px; } .event-card { width: 100%; } }

/* ==========================================================================
   Rytmus stránky: jedna svislá mezera pro všechny sekce a dva pevné kroky
   uvnitř - nadpis → perex a úvodní blok → obsah.
   ========================================================================== */
:root { --section-space: clamp(3rem, 4.5vw, 4.5rem); --space-heading: 1rem; --space-block: 2.25rem; }
.section, .product-showcase, .contact, .faq { padding-block: var(--section-space); }
.hero { padding-bottom: var(--section-space); }

.workflow .container > h2 { margin-bottom: var(--space-heading); }
.workflow-lead { max-width: 62ch; margin-inline: auto; margin-bottom: var(--space-block); font-size: var(--text-lead); line-height: 1.6; text-align: center; }
.faq > h2 { margin-bottom: var(--space-block); }
.showcase-heading { margin-bottom: var(--space-block); }

/* Tmavý pruh: nadpis a seznam začínají na stejné lince. */
.contrast-grid { align-items: start; }

/* Ovladače karuselu sdílejí proměnné se snímkem, takže lícují s nadpisem. */
@media (min-width: 821px) {
  .product-showcase .story-carousel { --carousel-media: 62.5%; --carousel-pad: clamp(1.5rem, 5vw, 4.5rem); }
  .product-showcase .carousel-slide { grid-template-columns: var(--carousel-media) 1fr; }
  .product-showcase .carousel-slide > div { padding: var(--carousel-pad); }
  .product-showcase .carousel-controls { right: auto; bottom: var(--carousel-pad); left: calc(var(--carousel-media) + var(--carousel-pad)); }
}
/* Dekorativní kruh v hero sekci byl dřív schovaný pod neprůhlednou fotografií.
   Pod průsvitným panelem karty prosvítá a čte se jako chyba, proto se ruší. */
.hero::after { content: none; }

/* ==========================================================================
   Kontakt: sekce už nemá vlastní podbarvení. Dřív se pozadí měnilo dvakrát
   (stránka → tónovaný pruh → sotva znatelný panel). Teď panel leží přímo na
   pozadí stránky a je téměř neprůhledný, jak popisuje pravidlo pro formuláře.
   ========================================================================== */
.contact { background: none; }
.contact-shell { background: rgb(255 255 255 / 96%); border-color: rgb(255 255 255 / 92%); box-shadow: 0 24px 60px rgb(15 23 42 / 12%); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Sekce s ukázkami má viditelný nadpis, aby perex nezačínal bez souvislosti. */
.showcase-heading { display: block; max-width: 42rem; margin-inline: auto; text-align: center; }
.showcase-heading h2 { margin: 0 auto var(--space-heading); }
.showcase-heading p { margin: 0; color: var(--muted); font-size: var(--text-lead); line-height: 1.6; }

/* Displejový nadpis: české háčky a čárky potřebují víc místa, než dávalo
   řádkování 1,0 a prostrkání -0,075 em. Volnější sazba je čitelnější. */
h1 { line-height: 1.1; letter-spacing: -.03em; }
@media (max-width: 600px) { h1 { line-height: 1.12; letter-spacing: -.025em; } }
/* Stejné pravidlo platí pro celou displejovou sazbu, ne jen pro H1. */
h2 { line-height: 1.08; letter-spacing: -.03em; }
.carousel-slide h3 { line-height: 1.1; letter-spacing: -.03em; }
.workflow h3, .benefit-grid h3 { letter-spacing: -.02em; }

@media (max-width: 820px) {
  .workflow .container > h2, .workflow-lead, .faq > h2, .showcase-heading, .showcase-heading h2, .showcase-heading p { margin-inline: 0; text-align: left; }
  .workflow-lead, .showcase-heading { max-width: none; }

  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .button { width: 100%; }
  .hero .actions .text-link { align-self: center; }

  .issue-list p { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0 1rem; }
  .issue-list p span { text-align: left; }

  .hero h1 { margin-bottom: var(--space-heading); }
  .hero .lead { margin-bottom: var(--space-block); }
  .hero .actions { margin-bottom: 0; }
  .hero-grid { gap: 3rem; }
  .contrast-grid { row-gap: var(--space-block); }
  .contrast-grid h2 { margin-bottom: 0; }
}

@media (max-width: 600px) {
  .issue-list p { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

.site-footer .footer-grid > div:last-child p { margin-top: .35rem; }

@media (min-width: 821px) {
  .contrast-grid h2 { margin-top: -.24em; }
}