/* ==========================================================================
   IM Bazény · style.css
   ========================================================================== */

/* 0. Fonts: served from this site, so no request goes to Google.
   Variable files (one per subset); latin-ext carries the Slovak letters.
   ========================================================================== */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Design tokens
   ========================================================================== */
:root {
  --background: 210 20% 98%;        /* near-white page background */
  --foreground: 213 56% 11%;        /* deep navy: body text AND dark surfaces */
  --card: 0 0% 100%;
  --card-foreground: 213 56% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 56% 11%;
  --primary: 213 56% 11%;
  --primary-foreground: 0 0% 98%;
  --secondary: 210 20% 96%;         /* pale blue-grey section bands */
  --secondary-foreground: 213 56% 11%;
  --muted: 210 20% 96%;
  --muted-foreground: 213 13% 45%;  /* paragraph text */
  --accent: 194 100% 42%;           /* bright cyan: icons, labels, hovers, CTAs */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 14% 90%;
  --input: 220 14% 90%;
  --ring: 194 100% 42%;
  --radius: 0.25rem;                /* small global radius */
  --font-heading: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

.dark {
  --background: 210 20% 98%;
  --foreground: 213 56% 11%;
  --card: 0 0% 100%;
  --card-foreground: 213 56% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 213 56% 11%;
  --primary: 213 56% 11%;
  --primary-foreground: 0 0% 98%;
  --secondary: 210 20% 96%;
  --secondary-foreground: 213 56% 11%;
  --muted: 210 20% 96%;
  --muted-foreground: 213 13% 45%;
  --accent: 194 100% 42%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 14% 90%;
  --input: 220 14% 90%;
  --ring: 194 100% 42%;
  --radius: 0.25rem;
  --font-heading: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Values derived from the tokens */
:root {
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* 2. Reset
   ========================================================================== */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p, figure, blockquote, ul, ol {
  margin: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

img, svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-feature-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button {
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  -webkit-appearance: button;
}

:disabled {
  cursor: default;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: hsl(var(--muted-foreground));
}

[hidden] {
  display: none !important;
}

[tabindex="-1"]:focus {
  outline: none;
}

/* 3. Global rules and utilities
   ========================================================================== */
::selection {
  background: hsl(var(--accent));
  color: white;
}

:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}

/* Small uppercase label in the body font (Inter): home eyebrows, footer headings */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.text-balance {
  text-wrap: balance;
}

.text-accent {
  color: hsl(var(--accent));
}

/* Lucide icons */
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.i-4 { width: 1rem; height: 1rem; }
.i-5 { width: 1.25rem; height: 1.25rem; }
.i-6 { width: 1.5rem; height: 1.5rem; }
.i-7 { width: 1.75rem; height: 1.75rem; }
.i-8 { width: 2rem; height: 2rem; }

/* Images that fill and crop to their box */
.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* keeps a number like a registration no. on one line */
.nowrap {
  white-space: nowrap;
}

/* 4. Layout
   ========================================================================== */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--background));
}

.main {
  flex: 1 1 0%;
}

.wrap {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* 5. Navbar
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  background-color: hsl(var(--background) / 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom-width: 1px;
  border-color: hsl(var(--border));
}

.navbar__bar {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo__text {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.025em;
}

/* blue wave under the name: one S-curve, low in the first half and high in the
   second, thicker in the middle with thin ends. Its highest point sits exactly on
   the baseline (0.96em down: Instrument Sans ascent 0.97, line-height 1.2), so it
   touches the bottom of the letters without crossing them. Drawn as a filled shape
   in 0.001em units, so it stays exact at any logo size. */
.logo__text::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.05em;
  right: -0.05em;
  top: 0.96em;
  height: 0.315em;
  background-color: hsl(var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 315' preserveAspectRatio='none'%3E%3Cpath d='M0 152L11 158L22 164L33 170L44 177L56 183L67 189L78 196L89 201L100 207L111 212L122 217L133 221L144 226L156 229L167 232L178 235L189 238L200 239L211 241L222 241L233 241L244 241L256 240L267 239L278 237L289 234L300 231L311 227L322 223L333 219L344 214L356 208L367 202L378 196L389 189L400 182L411 175L422 167L433 160L444 152L456 144L467 135L478 127L489 118L500 110L511 102L522 93L533 85L544 77L556 70L567 62L578 55L589 48L600 41L611 35L622 29L633 24L644 19L656 15L667 11L678 8L689 5L700 3L711 1L722 0L733 0L744 0L756 1L767 3L778 5L789 8L800 11L811 15L822 20L833 25L844 30L856 36L867 43L878 50L889 58L900 66L911 74L922 83L933 92L944 101L956 111L967 121L978 131L989 141L1000 152L1000 164L989 158L978 151L967 145L956 138L944 132L933 126L922 120L911 114L900 108L889 103L878 98L867 94L856 90L844 86L833 83L822 80L811 78L800 76L789 75L778 74L767 74L756 74L744 75L733 76L722 78L711 81L700 84L689 88L678 92L667 96L656 101L644 107L633 113L622 119L611 126L600 133L589 140L578 148L567 156L556 164L544 172L533 180L522 188L511 197L500 205L489 213L478 222L467 230L456 238L444 246L433 253L422 260L411 267L400 274L389 280L378 286L367 291L356 296L344 300L333 304L322 308L311 310L300 312L289 314L278 315L267 315L256 315L244 314L233 312L222 310L211 308L200 304L189 300L178 296L167 291L156 285L144 279L133 272L122 265L111 257L100 249L89 241L78 232L67 223L56 214L44 204L33 195L22 185L11 174L0 164Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 315' preserveAspectRatio='none'%3E%3Cpath d='M0 152L11 158L22 164L33 170L44 177L56 183L67 189L78 196L89 201L100 207L111 212L122 217L133 221L144 226L156 229L167 232L178 235L189 238L200 239L211 241L222 241L233 241L244 241L256 240L267 239L278 237L289 234L300 231L311 227L322 223L333 219L344 214L356 208L367 202L378 196L389 189L400 182L411 175L422 167L433 160L444 152L456 144L467 135L478 127L489 118L500 110L511 102L522 93L533 85L544 77L556 70L567 62L578 55L589 48L600 41L611 35L622 29L633 24L644 19L656 15L667 11L678 8L689 5L700 3L711 1L722 0L733 0L744 0L756 1L767 3L778 5L789 8L800 11L811 15L822 20L833 25L844 30L856 36L867 43L878 50L889 58L900 66L911 74L922 83L933 92L944 101L956 111L967 121L978 131L989 141L1000 152L1000 164L989 158L978 151L967 145L956 138L944 132L933 126L922 120L911 114L900 108L889 103L878 98L867 94L856 90L844 86L833 83L822 80L811 78L800 76L789 75L778 74L767 74L756 74L744 75L733 76L722 78L711 81L700 84L689 88L678 92L667 96L656 101L644 107L633 113L622 119L611 126L600 133L589 140L578 148L567 156L556 164L544 172L533 180L522 188L511 197L500 205L489 213L478 222L467 230L456 238L444 246L433 253L422 260L411 267L400 274L389 280L378 286L367 291L356 296L344 300L333 304L322 308L311 310L300 312L289 314L278 315L267 315L256 315L244 314L233 312L222 310L211 308L200 304L189 300L178 296L167 291L156 285L144 279L133 272L122 265L111 257L100 249L89 241L78 232L67 223L56 214L44 204L33 195L22 185L11 174L0 164Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

.nav-link {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: hsl(var(--foreground) / 0.85);
  transition: color 300ms var(--ease);
}

.nav-link:hover,
.nav-link.is-active {
  color: hsl(var(--accent));
}

.nav-cta {
  display: none;
  white-space: nowrap;
  padding: 0.625rem 1.25rem;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}

.nav-cta:hover {
  background-color: hsl(var(--accent));
  color: white;
}

.menu-btn {
  padding: 0.5rem;
  margin-right: -0.5rem;
}

.mobile-menu {
  background-color: hsl(var(--background));
}

.mobile-menu__list {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mobile-link {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.mobile-link.is-active {
  color: hsl(var(--accent));
}

.mobile-cta {
  display: inline-flex;
  padding: 0.75rem 1.25rem;
  margin-top: 0.5rem;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-cta { display: block; }
  .menu-btn { display: none; }
  .mobile-menu { display: none; }
}

/* 6. Footer
   ========================================================================== */
.footer {
  margin-top: 8rem;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background) / 0.8);
}

.footer__grid {
  padding-top: 5rem;
  padding-bottom: 5rem;
  display: grid;
  gap: 3rem;
}

.footer .logo__text {
  color: hsl(var(--background));
}

.footer__about {
  margin-top: 1.5rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.6);
}

.footer__heading {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: hsl(var(--background) / 0.55);
}

.footer__list {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.footer__list > * + * {
  margin-top: 0.75rem;
}

.footer__list a {
  transition: color 300ms var(--ease);
}

.footer__list a:hover {
  color: hsl(var(--accent));
}

.footer__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer__bottom {
  border-top-width: 1px;
  border-color: hsl(var(--background) / 0.1);
}

.footer__bottom-inner {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: hsl(var(--background) / 0.55);
}

/* operator details required on a business website, and the privacy link */
.footer__bottom-inner--legal {
  padding-top: 0;
  font-size: 0.75rem;
  line-height: 1.125rem;
  color: hsl(var(--background) / 0.45);
}

.footer__bottom-inner--legal a {
  flex-shrink: 0;
  color: hsl(var(--background) / 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--background) / 0.3);
  transition: color 300ms var(--ease);
}

.footer__bottom-inner--legal a:hover {
  color: hsl(var(--accent));
}

@media (min-width: 640px) {
  .footer__bottom-inner { flex-direction: row; }
  .footer__bottom-inner--legal { align-items: flex-start; gap: 2rem; }
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: span 2 / span 2; }
}

/* 7. Home page
   ========================================================================== */

/* Micro-labels (home page only) */
.micro-label {
  margin-bottom: 1.25rem;
}
.micro-label--accent { color: hsl(var(--accent)); }
.micro-label--light { color: rgb(255 255 255 / 0.8); }

/* Square buttons */
.btn-sq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 300ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease);
}

.btn-sq--accent {
  background-color: hsl(var(--accent));
  color: white;
}

.btn-sq--accent:hover {
  background-color: white;
  color: hsl(var(--foreground));
}

.btn-sq--ghost {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.4);
  color: white;
}

.btn-sq--ghost:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.btn-sq--lg {
  padding-left: 2rem;
  padding-right: 2rem;
}

.arrow-slide {
  transition: transform 150ms var(--ease);
}

.btn-sq:hover .arrow-slide {
  transform: translateX(0.25rem);
}

/* Hero: starts below the fixed navbar, so no part of the photo hides behind it. On phones it is
   as tall as the text needs; from tablet size it fills the screen down to the intro strip, so the
   strip is still visible without scrolling. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  margin-top: 5rem;
  aspect-ratio: 2000 / 924;
  clip-path: inset(0);
}

/* The photo sits slightly higher than the frame: its top 5% is tucked above the hero's edge. */
.hero__img {
  top: -5%;
  height: 105%;
}

@media (min-width: 768px) {
  .hero {
    aspect-ratio: auto;
    min-height: min(calc(100vh - 13.25rem), 64rem);
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background-image:
    /* soft dark fade behind the headline, text and buttons (bottom-left) */
    radial-gradient(ellipse 70% 85% at 0% 100%, hsl(var(--foreground) / 0.45) 0%, hsl(var(--foreground) / 0.22) 45%, transparent 75%),
    linear-gradient(to top, hsl(var(--foreground) / 0.7), hsl(var(--foreground) / 0.1), hsl(var(--foreground) / 0.3));
}

.hero__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: min(2.75rem, calc((100vw - 3rem) / 7.9));
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.95;
  max-width: 56rem;
  text-wrap: balance;
  color: white;
}

.hero__text {
  margin-top: 1.25rem;
  max-width: 36rem;
  color: rgb(255 255 255 / 0.8);
  font-size: 1.125rem;
  line-height: 1.625;
}

.hero__actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero__title { font-size: 3.75rem; }
  .hero__actions { flex-direction: row; }
}

@media (min-width: 1024px) {
  .hero { min-height: min(calc(100vh - 11.25rem), 64rem); }
  .hero__content { padding-top: 2.5rem; padding-bottom: 4rem; }
  .hero__title { font-size: 4.5rem; }
}

/* Intro strip */
.intro-strip {
  border-bottom-width: 1px;
}

.intro-strip__grid {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.intro-strip__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.intro-strip__sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 768px) {
  .intro-strip__grid {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Home sections */
.home-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .home-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.section-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .section-head {
    flex-direction: row;
    align-items: flex-end;
  }
}

.h2-home {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.h2-home--narrow { max-width: 36rem; }
.h2-home--spaced { margin-bottom: 1.5rem; }

@media (min-width: 1024px) {
  .h2-home {
    font-size: 3rem;
    line-height: 1;
  }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground) / 0.85);
  transition: color 300ms var(--ease);
}

.link-arrow:hover {
  color: hsl(var(--accent));
}

.link-arrow--strong {
  margin-top: 2.5rem;
  color: hsl(var(--foreground));
}

/* Hairline service grid */
.hairline-grid {
  display: grid;
  border-top-width: 1px;
  border-left-width: 1px;
}

.hairline-cell {
  padding: 2rem;
  border-right-width: 1px;
  border-bottom-width: 1px;
  transition: background-color 300ms var(--ease);
}

.hairline-cell:hover {
  background-color: hsl(var(--secondary) / 0.4);
}

.hairline-cell__icon {
  margin-bottom: 1.5rem;
  color: hsl(var(--accent));
  transition: transform 150ms var(--ease);
}

.hairline-cell:hover .hairline-cell__icon {
  transform: scale(1.1);
}

.hairline-cell__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.hairline-cell__text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 640px) {
  .hairline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .hairline-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bands and split sections */
.band {
  background-color: hsl(var(--secondary) / 0.4);
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.split {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.split__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.split__media--rounded {
  border-radius: 0.75rem;
}

.order-text { order: 2; }
.order-media { order: 1; }

@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-text { order: 1; }
  .order-media { order: 2; }
}

.lead {
  margin-bottom: 2rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.dot-list > * + * {
  margin-top: 1rem;
}

.dot-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dot {
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: hsl(var(--accent));
}

/* Tech precision mini cards */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.mini-card {
  padding-left: 1rem;
  border-left-width: 2px;
  border-color: hsl(var(--accent));
}

.mini-card .icon {
  margin-bottom: 0.75rem;
  color: hsl(var(--accent));
}

.mini-card__title {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.mini-card__text {
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}

/* Day / night switch: the whole band turns to night with the photo */
.daynight {
  background-color: hsl(var(--secondary) / 0.4);
  border-top-width: 1px;
  border-bottom-width: 1px;
  transition: background-color 700ms var(--ease), border-color 700ms var(--ease);
}

.daynight[data-mode="night"] {
  background-color: hsl(var(--foreground));
  border-color: hsl(var(--foreground));
}

.daynight__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: hsl(var(--foreground));
}

/* Desktop: keep the whole photo and the switch on screen together on shorter laptop screens */
@media (min-width: 1024px) {
  .daynight__media { max-height: calc(100vh - 8rem); }
}

.daynight__img {
  transition: opacity 900ms var(--ease), transform 1200ms var(--ease);
}

.daynight__img--night {
  opacity: 0;
  transform: scale(1.03);
}

.daynight[data-mode="night"] .daynight__img--night {
  opacity: 1;
  transform: scale(1);
}

.daynight[data-mode="night"] .daynight__img--day {
  transform: scale(1.03);
}

.daynight__title,
.daynight .lead,
.daynight__caption {
  transition: color 700ms var(--ease);
}

.daynight[data-mode="night"] .daynight__title { color: white; }
.daynight[data-mode="night"] .lead { color: rgb(255 255 255 / 0.7); }

.daynight__switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.25rem;
  border-width: 1px;
  border-color: hsl(var(--foreground) / 0.15);
  transition: border-color 700ms var(--ease);
}

.daynight[data-mode="night"] .daynight__switch {
  border-color: rgb(255 255 255 / 0.2);
}

.daynight__thumb {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc(50% - 0.25rem);
  background-color: hsl(var(--foreground));
  transition: transform 450ms var(--ease), background-color 700ms var(--ease);
}

.daynight[data-mode="night"] .daynight__thumb {
  transform: translateX(100%);
  background-color: white;
}

.daynight__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.6);
  transition: color 450ms var(--ease);
}

.daynight__option:hover { color: hsl(var(--foreground)); }
.daynight__option[aria-pressed="true"] { color: white; }
.daynight[data-mode="night"] .daynight__option { color: rgb(255 255 255 / 0.6); }
.daynight[data-mode="night"] .daynight__option:hover { color: white; }
.daynight[data-mode="night"] .daynight__option[aria-pressed="true"] { color: hsl(var(--foreground)); }

.daynight__caption {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.daynight[data-mode="night"] .daynight__caption { color: rgb(255 255 255 / 0.6); }

/* Final CTA with photo */
.cta-photo {
  position: relative;
  overflow: hidden;
}

.cta-photo__overlay {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--foreground) / 0.6);
}

.cta-photo__content {
  position: relative;
  padding-top: 7rem;
  padding-bottom: 7rem;
  text-align: center;
}

.cta-photo__title {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: white;
}

.cta-photo__text {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  color: rgb(255 255 255 / 0.8);
}

.cta-photo .btn-sq {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .cta-photo__title {
    font-size: 3.75rem;
    line-height: 1;
  }
}

/* 8. Subpages (Služby, Galéria, O nás, Kontakt)
   ========================================================================== */

/* Shared hero */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, hsl(var(--foreground) / 0.85), hsl(var(--foreground) / 0.25), hsl(var(--foreground) / 0.4));
}

.page-hero__content {
  position: relative;
  width: 100%;
  padding-top: 10rem;
  padding-bottom: 4rem;
}

.page-hero__eyebrow {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
}

.page-hero__title {
  max-width: 56rem;
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: white;
}

.page-hero__subtitle {
  margin-top: 1.5rem;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.625;
  color: rgb(255 255 255 / 0.8);
}

@media (min-width: 1024px) {
  .page-hero__content { padding-bottom: 5rem; }
  .page-hero__title { font-size: 4.5rem; }
}

/* Section spacing */
.sp-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.sp-pb {
  padding-bottom: 6rem;
}

.sp-pt {
  padding-top: 6rem;
}

/* Subpage headings: text-3xl lg:text-4xl */
.h2-sub {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.h2-sub--spaced { margin-bottom: 1.5rem; }

@media (min-width: 1024px) {
  .h2-sub {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.muted-text {
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* Cards */
.card {
  padding: 2rem;
  background-color: hsl(var(--card));
  border-width: 1px;
  border-radius: 0.75rem;
}

.card--hover {
  transition: all 300ms var(--ease);
}

.card--hover:hover {
  border-color: hsl(var(--accent));
  box-shadow: var(--shadow-xl);
  transform: translateY(-0.25rem);
}

.icon-circle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: hsl(var(--accent) / 0.1);
  color: hsl(var(--accent));
}

.icon-circle--11 { width: 2.75rem; height: 2.75rem; }
.icon-circle--12 { width: 3rem; height: 3rem; }
.icon-circle--14 { width: 3.5rem; height: 3.5rem; }
.icon-circle--16 { width: 4rem; height: 4rem; }

/* Pill buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}

.btn-pill--accent {
  background-color: hsl(var(--accent));
  color: white;
}

.btn-pill--accent:hover {
  background-color: white;
  color: hsl(var(--foreground));
}

.btn-pill--dark {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
}

.btn-pill--dark:hover {
  background-color: hsl(var(--accent));
  color: white;
}

.btn-pill--sm {
  padding: 0.875rem 1.75rem;
}

/* CTA panels */
.cta-panel {
  padding: 4rem 2rem;
  border-radius: 1rem;
  text-align: center;
}

.cta-panel--dark {
  background-color: hsl(var(--foreground));
}

.cta-panel--light {
  background-color: hsl(var(--accent) / 0.1);
  border-width: 1px;
  border-color: hsl(var(--accent) / 0.2);
}

.cta-panel__title {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cta-panel--dark .cta-panel__title {
  color: white;
}

.cta-panel__text {
  max-width: 36rem;
  margin: 1.25rem auto 0;
}

.cta-panel--dark .cta-panel__text {
  color: rgb(255 255 255 / 0.7);
}

.cta-panel--light .cta-panel__text {
  color: hsl(var(--muted-foreground));
}

.cta-panel .btn-pill {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .cta-panel {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .cta-panel__title {
    font-size: 3rem;
    line-height: 1;
  }
}

/* 9. Služby
   ========================================================================== */
.intro-grid {
  display: grid;
  gap: 3rem;
}

.intro-grid .h2-sub {
  line-height: 1.375;
}

@media (min-width: 1024px) {
  .intro-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .intro-grid__main { grid-column: span 7 / span 7; }
  .intro-grid__side { grid-column: span 5 / span 5; }
}

.service-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.service-card .icon-circle {
  margin-bottom: 1.5rem;
}

.service-card__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}

.service-card__desc {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.service-card__list {
  padding-top: 1.5rem;
  border-top-width: 1px;
}

.service-card__list > * + * {
  margin-top: 0.75rem;
}

.service-card__list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.service-card__list .dot {
  margin-top: 0.5rem;
}

/* Process */
.process {
  position: relative;
  overflow: hidden;
}

.process__bg {
  opacity: 0.07;
}

.process__inner {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.process__head {
  max-width: 42rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.process__title {
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.process__lead {
  color: hsl(var(--muted-foreground));
}

.process__grid {
  display: grid;
  gap: 2rem;
}

.step {
  text-align: center;
}

.step__circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  background-color: hsl(var(--card));
  border-width: 1px;
  color: hsl(var(--accent));
}

.step__badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: hsl(var(--foreground));
  color: white;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.step__title {
  margin-bottom: 0.25rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.step__text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 640px) {
  .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .process__title {
    font-size: 3rem;
    line-height: 1;
  }
  .process__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 10. Galéria
   ========================================================================== */

/* Phones: two columns of square tiles. From 768px: a three-column mosaic where
   portrait photos span two rows (.tile--tall) and one photo spans 2x2 (.tile--big).
   The tile order in galeria.html is arranged so the mosaic packs without holes. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  background-color: hsl(var(--secondary));
}

.tile__img {
  transition: transform 700ms var(--ease);
}

.tile:hover .tile__img {
  transform: scale(1.05);
}

.tile__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, hsl(var(--foreground) / 0.7), transparent, transparent);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}

.tile:hover .tile__shade {
  opacity: 1;
}

.tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: all 500ms var(--ease);
}

.tile:hover .tile__caption {
  opacity: 1;
  transform: translateY(0);
}

.tile__tag {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}

.tile__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: white;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .tile { aspect-ratio: 4 / 3; }
  .tile--tall {
    grid-row: span 2;
    aspect-ratio: auto;
  }
  .tile--big {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* Below the grid: more photos on Facebook */
.gallery-more {
  padding-top: 3rem;
  padding-bottom: 6rem;
  text-align: center;
}

.gallery-more__text {
  margin-bottom: 1.5rem;
  color: hsl(var(--muted-foreground));
}

/* 11. O nás
   ========================================================================== */
.stats {
  background-color: hsl(var(--secondary) / 0.4);
  border-bottom-width: 1px;
}

.stats__grid {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}

.stat__value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.stat__label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat__value {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.check-list > * + * {
  margin-top: 1rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.check-list .icon {
  color: hsl(var(--accent));
}

.check-list span {
  color: hsl(var(--foreground) / 0.9);
}

.values {
  background-color: hsl(var(--secondary) / 0.4);
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.values__head {
  max-width: 42rem;
  margin-bottom: 3.5rem;
}

.values__grid {
  display: grid;
  gap: 1.5rem;
}

.value-card {
  display: flex;
  gap: 1.25rem;
}

.value-card__num {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 600;
  color: hsl(var(--accent) / 0.3);
}

.value-card__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.value-card__text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

@media (min-width: 640px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contact-strip {
  display: grid;
  gap: 1.5rem;
}

.contact-panel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.contact-panel--link {
  transition: border-color 300ms var(--ease);
}

.contact-panel--link:hover {
  border-color: hsl(var(--accent));
}

.contact-panel__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

.contact-panel__value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  transition: color 300ms var(--ease);
}

.contact-panel--link:hover .contact-panel__value {
  color: hsl(var(--accent));
}

@media (min-width: 640px) {
  .contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Very narrow phones: the phone number never wraps, so the cards give up some padding to fit it */
@media (max-width: 359.98px) {
  .contact-strip .card { padding: 1.25rem; }
  .contact-panel { gap: 1rem; }
  .contact-panel .icon-circle { width: 3rem; height: 3rem; }
  .contact-panel__value { font-size: 1.125rem; line-height: 1.75rem; }
}

/* 12. Kontakt
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .contact-aside { grid-column: span 4 / span 4; }
  .contact-main { grid-column: span 8 / span 8; }
}

.live {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.live__dot {
  position: relative;
  display: flex;
  width: 0.625rem;
  height: 0.625rem;
}

.live__ping {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background-color: hsl(var(--accent));
  opacity: 0.6;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.live__core {
  position: relative;
  display: inline-flex;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background-color: hsl(var(--accent));
}

.live__text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.contact-rows > * + * {
  margin-top: 1.5rem;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-row__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

.contact-row__value {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  transition: color 300ms var(--ease);
}

a.contact-row:hover .contact-row__value {
  color: hsl(var(--accent));
}

.contact-row__note {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

.services-note {
  margin-top: 3rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: hsl(var(--secondary) / 0.6);
}

.services-note__title {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.services-note__text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* Form */
.form {
  padding: 2rem;
  background-color: hsl(var(--card));
  border-width: 1px;
  border-radius: 1rem;
}

.form > * + * {
  margin-top: 2rem;
}

.form__grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .form { padding: 2.5rem; }
}

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.control {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-color: hsl(var(--input));
  background-color: hsl(var(--background));
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease);
}

.control:focus {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 1px hsl(var(--accent));
}

textarea.control {
  resize: none;
}

/* native select ignores padding (Safari) and sizes itself differently, so draw it like the inputs */
select.control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647182' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem 1rem;
  cursor: pointer;
}

/* privacy note under the send button */
.form > .form__note {
  margin-top: 1rem;
}

.form__note {
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}

.form__note a {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--accent));
}

.form__note a:hover {
  color: hsl(var(--accent));
}

/* honeypot: hidden from people, visible to bots */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--destructive));
}

.btn-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 9999px;
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: color 300ms var(--ease), background-color 300ms var(--ease);
}

.btn-submit:hover {
  background-color: hsl(var(--accent));
  color: white;
}

.btn-submit:disabled {
  opacity: 0.6;
}

.btn-submit__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.success {
  padding: 3rem;
  background-color: hsl(var(--card));
  border-width: 1px;
  border-radius: 1rem;
  text-align: center;
}

.success .icon-circle {
  margin: 0 auto 1.5rem;
}

.success__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
}

.success__text {
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
  color: hsl(var(--muted-foreground));
}

.success__reset {
  margin-top: 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground) / 0.7);
  transition: color 300ms var(--ease);
}

.success__reset:hover {
  color: hsl(var(--accent));
}

/* 13. Page not found
   ========================================================================== */
.notfound {
  padding-top: 10rem;
  padding-bottom: 6rem;
  text-align: center;
}

.notfound__code {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(var(--accent));
}

.notfound__title {
  font-family: var(--font-heading);
  font-size: 3rem;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.notfound__text {
  max-width: 36rem;
  margin: 1.5rem auto 0;
  font-size: 1.125rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.notfound .btn-pill {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .notfound__title { font-size: 4.5rem; }
}

/* 14. Privacy page
   ========================================================================== */
.page-hero--plain {
  min-height: 0;
  background-color: hsl(var(--foreground));
}

.page-hero--plain .page-hero__content {
  padding-top: 9rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
  .page-hero--plain .page-hero__content { padding-top: 11rem; padding-bottom: 4.5rem; }
  .page-hero--plain .page-hero__title { font-size: 3.75rem; }
}

.legal {
  max-width: 46rem;
  padding-top: 3.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
}

.legal__meta {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.legal h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}

.legal p + p,
.legal ul + p,
.legal p + ul,
.legal dl + p,
.legal p + dl {
  margin-top: 1rem;
}

.legal ul > li {
  position: relative;
  padding-left: 1.5rem;
}

.legal ul > li + li {
  margin-top: 0.5rem;
}

.legal ul > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.7em;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: hsl(var(--accent));
}

.legal strong {
  font-weight: 600;
  color: hsl(var(--foreground));
}

.legal a {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: hsl(var(--accent));
  overflow-wrap: anywhere;
}

.legal a:hover {
  color: hsl(var(--accent));
}

.legal-id {
  padding: 1.25rem 1.5rem;
  background-color: hsl(var(--card));
  border-width: 1px;
  border-radius: 1rem;
}

.legal-id > div {
  display: grid;
  gap: 0.125rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.legal-id > div + div {
  border-top-width: 1px;
}

.legal-id dt {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.legal-id dd {
  margin: 0;
  color: hsl(var(--foreground));
}

@media (min-width: 640px) {
  .legal-id > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; }
  .legal-id dt { font-size: 0.875rem; line-height: 1.75; }
}

/* 15. Animations
   ========================================================================== */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live__ping { animation: none; }
  .daynight,
  .daynight * { transition-duration: 1ms !important; }
}