/* ===== Design tokens ===== */
:root {
  --bg: #FAFAF7;
  --bg-alt: #F1F3EF;
  --surface: #FFFFFF;
  --text: #16211C;
  --text-muted: #55635B;
  --border: #E4E7E1;

  --primary: #0E7C66;
  --primary-dark: #0A5F4F;
  --primary-tint: #E5F3EF;
  --accent: #FF6B4A;
  --accent-dark: #E85434;

  --font-head: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 16px; /* single corner radius used for all rectangular elements (cards, image, inputs, badges) */

  --shadow-sm: 0 1px 2px rgba(22, 33, 28, 0.06);
  --shadow-md: 0 8px 24px rgba(22, 33, 28, 0.08);
  --shadow-lg: 0 24px 48px rgba(22, 33, 28, 0.12);

  --container-w: 1160px;
}

/* ===== Reset ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.2; margin: 0; color: var(--text); }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

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

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-full { width: 100%; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}
.logo {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}
.logo span { color: var(--primary); }
.main-nav {
  display: flex;
  gap: 32px;
}
.main-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.main-nav a:hover { color: var(--primary); }

@media (max-width: 860px) {
  .main-nav { display: none; }
}

@media (max-width: 400px) {
  .header-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px; }
  .logo {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-size: 1rem;
  }
  .btn-sm { padding: 9px 14px; font-size: 0.82rem; }
}

/* ===== Typography helpers ===== */
.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}
.eyebrow.center { display: block; text-align: center; }

.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  max-width: 720px;
}
.section-title.center { margin: 0 auto 16px; text-align: center; }

.section-sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 620px;
  margin-top: 12px;
}
.section-sub.center { margin-left: auto; margin-right: auto; text-align: center; }

.lead {
  color: var(--text-muted);
  font-size: 1.08rem;
  max-width: 560px;
  margin-top: 18px;
}

.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }

@media (max-width: 700px) {
  .section { padding: 64px 0; }
}

/* ===== Hero ===== */
.hero {
  padding: 64px 0 96px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.hero-sub {
  color: var(--text-muted);
  font-size: 1.12rem;
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}
.hero-trust li { position: relative; padding-left: 18px; }
.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.hero-visual { position: relative; }
.hero-blob {
  position: absolute;
  inset: -10% -15%;
  background: radial-gradient(circle at 30% 30%, var(--primary-tint), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(255,107,74,0.14), transparent 55%);
  z-index: 0;
  border-radius: 50%;
  filter: blur(4px);
}
.hero-photo {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  height: 460px; /* fallback until JS aligns it to the copy block */
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 30%;
  display: block;
}
.hero-photo-badge {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-md);
  max-width: 260px;
}
.hero-photo-badge-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.hero-photo-badge div { display: flex; flex-direction: column; }
.hero-photo-badge strong {
  font-family: var(--font-head);
  font-size: 0.95rem;
  color: var(--text);
}
.hero-photo-badge span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 480px; margin: 0 auto; }
  .hero-visual { margin-top: 0 !important; }
  .hero-photo { height: auto !important; aspect-ratio: 6 / 5; }
}

/* ===== Idea-to-answer journey ===== */
.journey-trunk {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.journey-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 190px;
}
.journey-node-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.journey-node p {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text);
}
.journey-arrow {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke: var(--border);
  stroke-width: 2;
  fill: none;
  margin-top: 9px;
}
.journey-fork {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 28px 0 36px;
}
.journey-arrow-down { transform: rotate(90deg); margin-top: 0; stroke: var(--primary); }
.journey-fork-label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.journey-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.journey-branch {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  border-top: 3px solid var(--primary);
}
.journey-branch-adjust { border-top-color: var(--accent); }
.journey-branch-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.journey-branch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  flex: 0 0 auto;
}
.journey-branch-adjust .journey-branch-icon { background: #FFEFE8; color: var(--accent-dark); }
.journey-branch-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.journey-branch-tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
}
.journey-branch-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: journey-step;
}
.journey-branch-steps li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
  counter-increment: journey-step;
}
.journey-branch-steps li::before {
  content: counter(journey-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-branch-steps strong { color: var(--text); }
.journey-branch-cost {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  font-size: 0.86rem;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .journey-trunk { flex-direction: column; align-items: center; }
  .journey-arrow { transform: rotate(90deg); margin: 0; }
  .journey-branches { grid-template-columns: 1fr; }
}

/* ===== Steps ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 20px;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.step.is-visible {
  opacity: 1;
  transform: none;
}
.step-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
  margin-bottom: 14px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 0.92rem; }

@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

/* ===== Deliverables ===== */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.deliverable {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.deliverable.is-visible {
  opacity: 1;
  transform: none;
}
.deliverable-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.deliverable h3 { font-size: 1.05rem; margin-bottom: 8px; }
.deliverable p { color: var(--text-muted); font-size: 0.94rem; }

@media (max-width: 900px) {
  .deliverables-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .deliverable {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 600px) {
  .deliverables-grid { grid-template-columns: 1fr; }
}


/* ===== Cases Slider ===== */
.slider {
  position: relative;
  margin-top: 48px;
}
.slider-track {
  display: flex;
  overflow: hidden;
  border-radius: var(--radius);
  scroll-behavior: smooth;
}
.slide {
  position: relative;
  min-width: 100%;
  padding: 64px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 640px;
  background-repeat: no-repeat;
  background-size: cover, cover;
  overflow: hidden;
}
.slide-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.slide h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  max-width: 600px;
  margin-bottom: 16px;
  color: #fff;
}
.slide p {
  max-width: 500px;
  opacity: 0.94;
  margin-bottom: 28px;
  font-size: 1.02rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}
.slide-cta {
  display: inline-flex;
  padding: 13px 26px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Each niche below gets its own hero "prototype" layout — not just its
   own color — so the block reads as eight different mockups, not one
   template with a palette swap: classic bottom-anchored, split-screen,
   centered vignette, floating browser-window inset, top-anchored,
   diagonal angled panel, framed product-shot, and a minimal centered
   layout. Pseudo-elements are used for the extra shapes/panels so no
   markup changes are needed. */

/* 1. Medical — the classic: full-bleed photo, copy anchored bottom-left. */
.slide-medical {
  background-image: linear-gradient(0deg, rgba(11, 64, 55, 0.95) 0%, rgba(11, 64, 55, 0.86) 32%, rgba(11, 64, 55, 0.4) 62%, rgba(11, 64, 55, 0.05) 100%), url('img/medicine.jpg');
  background-position: center, 50% 20%;
}

/* 2. Construction — split-screen: solid panel left for copy, photo right. */
.slide-construction {
  background-image: linear-gradient(100deg, rgba(45, 33, 22, 0.97) 0%, rgba(45, 33, 22, 0.92) 28%, rgba(45, 33, 22, 0.45) 42%, rgba(45, 33, 22, 0) 55%), url('img/builders.jpg');
  background-position: center, 0% 18%;
  background-size: cover, 115% auto;
  justify-content: center;
}
.slide-construction .slide-tag,
.slide-construction h3,
.slide-construction p {
  max-width: 420px;
}

/* 3. Craft — centered boutique composition: vignette, everything centered. */
.slide-craft {
  background-image: radial-gradient(ellipse at 50% 45%, rgba(85, 55, 26, 0.25) 0%, rgba(85, 55, 26, 0.72) 60%, rgba(85, 55, 26, 0.94) 100%), url('img/unique-product.jpg');
  background-position: center, 50% 22%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.slide-craft .slide-tag { margin-left: auto; margin-right: auto; }
.slide-craft h3,
.slide-craft p {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* 4. Service — solid color card with a floating "browser window" photo
   inset, like a screenshot of the actual site being pitched. */
.slide-service {
  background: linear-gradient(135deg, #1d3a4a, #0d1f28);
  justify-content: center;
}
.slide-service::before {
  content: '';
  position: absolute;
  top: 14%;
  bottom: 14%;
  right: 7%;
  width: 38%;
  border-radius: 12px;
  background: url('img/teacher.jpg') center 15%/cover;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  border: 5px solid rgba(255, 255, 255, 0.1);
}
.slide-service::after {
  content: '';
  position: absolute;
  top: calc(14% - 20px);
  right: 7%;
  width: 38%;
  height: 12px;
  background:
    radial-gradient(circle 3px at 12px 6px, rgba(255, 255, 255, 0.55) 99%, transparent 100%),
    radial-gradient(circle 3px at 28px 6px, rgba(255, 255, 255, 0.55) 99%, transparent 100%),
    radial-gradient(circle 3px at 44px 6px, rgba(255, 255, 255, 0.55) 99%, transparent 100%);
}
.slide-service .slide-tag,
.slide-service h3,
.slide-service p {
  max-width: 420px;
}

/* 5. Manufacturing — inverted: copy anchored to the top, photo revealed
   underneath (opposite of the medical/craft bottom-heavy treatment). The
   panel is a light, diagonal wash confined to the top-left corner so it
   never crosses into the top-right, where the man's face sits — and the
   crop keeps his whole head in frame with a little headroom above it. */
.slide-manufacturing {
  background-image: linear-gradient(135deg, rgba(240, 237, 230, 0.96) 0%, rgba(240, 237, 230, 0.92) 24%, rgba(240, 237, 230, 0.4) 42%, rgba(240, 237, 230, 0) 58%), url('img/production.jpg');
  background-position: center, 50% 0%;
  justify-content: flex-start;
}
.slide-manufacturing .slide-tag {
  background: rgba(31, 41, 55, 0.1);
  color: #1F2937;
}
.slide-manufacturing h3 { color: #1F2937; }
.slide-manufacturing p {
  color: #3A4453;
  text-shadow: none;
}
.slide-manufacturing .slide-cta {
  background: #1F2937;
  color: #fff;
}

/* 6. Fitness — an angled color panel cuts across the photo, sports-poster
   style, with the copy sitting inside the angled shape. */
.slide-fitness {
  background-image: linear-gradient(0deg, rgba(20, 12, 8, 0.3) 0%, rgba(20, 12, 8, 0.05) 40%, rgba(20, 12, 8, 0) 100%), url('img/sport.jpg');
  background-position: center, 50% 20%;
  justify-content: center;
}
.slide-fitness::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #A8482A;
  clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%);
}
.slide-fitness .slide-tag,
.slide-fitness h3,
.slide-fitness p {
  max-width: 340px;
}

/* 7. Product — dark "shop" backdrop with a large framed product-shot
   panel, like a single-product landing page hero. */
.slide-product {
  background: linear-gradient(150deg, #141a2e, #05070d);
  justify-content: center;
}
.slide-product::before {
  content: '';
  position: absolute;
  top: 9%;
  bottom: 9%;
  right: 6%;
  width: 44%;
  border-radius: 18px;
  background: url('img/one-product.jpg') center 16%/cover;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.slide-product .slide-tag,
.slide-product h3,
.slide-product p {
  max-width: 420px;
}

/* 8. Legal — minimal and restrained: vertically centered, italic
   headline, outlined call to action instead of a filled pill. */
.slide-legal {
  background-image: linear-gradient(100deg, rgba(21, 35, 64, 0.95) 0%, rgba(21, 35, 64, 0.88) 26%, rgba(21, 35, 64, 0.4) 42%, rgba(21, 35, 64, 0) 56%), url('img/lawyer2.jpg');
  background-position: center, 0% 90%;
  background-size: cover, 112% auto;
  justify-content: center;
}
.slide-legal .slide-tag,
.slide-legal h3,
.slide-legal p {
  max-width: 420px;
}
.slide-legal h3 { font-style: italic; }
.slide-legal .slide-cta {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 5;
}
.slider-arrow:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.slider-arrow-prev { left: -22px; }
.slider-arrow-next { right: -22px; }

@media (max-width: 700px) {
  .slide { padding: 32px 24px 36px; min-height: 460px; }
  .slider-arrow { display: none; }

  /* The desktop-only treatments (split-screen, floating panels, diagonal
     cuts, sideways gradients) rely on a wide, short box. On a narrow, tall
     mobile card they either misfire (gradient stops land in the wrong
     place) or their floating photo panels overlap the text. Rather than
     fight that geometry, every card falls back to the same reliable
     pattern here: full-bleed photo, simple top-to-bottom gradient in the
     niche's own color, text anchored clear of the image — like the
     medical/craft cards already use successfully at any size. */
  .slide-construction,
  .slide-service,
  .slide-fitness,
  .slide-product,
  .slide-legal {
    justify-content: flex-end;
    background-size: cover, cover;
  }
  .slide-construction .slide-tag, .slide-construction h3, .slide-construction p,
  .slide-service .slide-tag, .slide-service h3, .slide-service p,
  .slide-fitness .slide-tag, .slide-fitness h3, .slide-fitness p,
  .slide-product .slide-tag, .slide-product h3, .slide-product p,
  .slide-legal .slide-tag, .slide-legal h3, .slide-legal p {
    max-width: none;
  }

  .slide-construction {
    background-image: linear-gradient(0deg, rgba(45, 33, 22, 0.95) 0%, rgba(45, 33, 22, 0.85) 35%, rgba(45, 33, 22, 0.35) 65%, rgba(45, 33, 22, 0.05) 100%), url('img/builders.jpg');
    background-position: center, 50% 15%;
  }

  .slide-service::before,
  .slide-service::after { display: none; }
  .slide-service {
    background-image: linear-gradient(0deg, rgba(13, 31, 40, 0.95) 0%, rgba(13, 31, 40, 0.85) 35%, rgba(13, 31, 40, 0.35) 65%, rgba(13, 31, 40, 0.05) 100%), url('img/teacher.jpg');
    background-position: center, 65% 12%;
  }

  .slide-manufacturing {
    background-image: linear-gradient(180deg, rgba(240, 237, 230, 0.97) 0%, rgba(240, 237, 230, 0.93) 42%, rgba(240, 237, 230, 0.6) 72%, rgba(240, 237, 230, 0.15) 100%), url('img/production.jpg');
    background-position: center, 62% 8%;
  }

  .slide-fitness::before { display: none; }
  .slide-fitness {
    background-image: linear-gradient(0deg, rgba(168, 72, 42, 0.88) 0%, rgba(168, 72, 42, 0.55) 45%, rgba(168, 72, 42, 0.1) 100%), url('img/sport.jpg');
    background-position: center, 50% 15%;
  }

  .slide-product::before { display: none; }
  .slide-product {
    background-image: linear-gradient(0deg, rgba(5, 7, 13, 0.95) 0%, rgba(5, 7, 13, 0.85) 35%, rgba(5, 7, 13, 0.35) 65%, rgba(5, 7, 13, 0.05) 100%), url('img/one-product.jpg');
    background-position: center, 50% 14%;
  }

  .slide-legal {
    background-image: linear-gradient(0deg, rgba(21, 35, 64, 0.95) 0%, rgba(21, 35, 64, 0.85) 35%, rgba(21, 35, 64, 0.35) 65%, rgba(21, 35, 64, 0.05) 100%), url('img/lawyer2.jpg');
    background-position: center, 45% 12%;
  }
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.slider-dots button[aria-selected="true"] {
  background: var(--primary);
  transform: scale(1.25);
}

/* ===== Pricing ===== */
.price-card {
  max-width: 460px;
  margin: 48px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 44px 40px;
  text-align: center;
}
.price-amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3.4rem;
  color: var(--text);
  margin-bottom: 28px;
}
.price-currency { font-size: 1.8rem; vertical-align: super; margin-right: 4px; }
.price-period {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
}
.price-includes {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.price-includes li {
  position: relative;
  padding-left: 26px;
  font-size: 0.96rem;
  color: var(--text-muted);
}
.price-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 700;
}
/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}
.about-photo {
  position: sticky;
  top: 100px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  aspect-ratio: 3 / 4;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
.about-copy .lead { margin-top: 16px; max-width: 620px; }
.about-copy .lead:first-of-type { margin-top: 18px; }
.about-list {
  margin-top: 16px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { position: static; max-width: 320px; margin: 0 auto; }
}

/* ===== Payment note ===== */
.payment-note {
  max-width: 560px;
  margin: 24px auto 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ===== FAQ ===== */
.faq-section { max-width: 760px; }
.faq-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 24px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  color: var(--text-muted);
  font-size: 0.96rem;
  padding-bottom: 20px;
  margin: 0;
}
.faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ===== Form ===== */
.form-section { max-width: 800px; }
.apply-form { margin-top: 40px; }
.hp-field { position: absolute; left: -9999px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 28px;
}
.field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.field-row-align label {
  display: block;
  min-height: 2.5em;
  line-height: 1.25;
}
.req { color: var(--accent); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.field textarea {
  min-height: 110px;
  max-height: 260px;
  overflow-y: auto;
  resize: vertical;
  line-height: 1.5;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  outline: none;
}
.field input[aria-invalid="true"] {
  border-color: var(--accent);
}
.field-error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--accent-dark);
}
.phone-group {
  display: flex;
  gap: 10px;
}
.phone-group input { flex: 1; }

/* ===== Searchable country code picker ===== */
.country-select {
  position: relative;
  flex: 0 0 128px;
}
.country-select-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 13px 10px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.country-select-trigger:hover { border-color: var(--primary); }
.country-select-trigger:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  outline: none;
}
.country-select-chevron {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: 0 0 auto;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
}
.country-select-trigger[aria-expanded="true"] .country-select-chevron { transform: rotate(180deg); }

.country-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: max(260px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.country-select-search {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.country-select-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
  outline: none;
}
.country-select-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.country-select-list li[role="option"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
}
.country-select-list li[role="option"]:hover,
.country-select-list li[role="option"]:focus {
  background: var(--primary-tint);
  outline: none;
}
.country-select-name { flex: 1; }
.country-select-code { color: var(--text-muted); font-size: 0.86rem; }
.country-select-empty {
  padding: 14px 10px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}

@media (max-width: 700px) {
  .country-select { flex-basis: 140px; }
  .country-select-trigger {
    font-size: 1rem;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .country-select-panel { width: max(280px, 100%); }
}

.form-security {
  margin-top: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.form-status {
  margin-top: 18px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  min-height: 1.2em;
}
.form-status.success { color: var(--primary-dark); }
.form-status.error { color: var(--accent-dark); }

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ===== Add-ons (intentionally low-key — optional extras, not a pitch) ===== */
.addons {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}
.addons-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.addons-list {
  display: flex;
  flex-direction: column;
}
.addons-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.addons-list li:last-child { border-bottom: none; }
.addons-name {
  color: var(--text-muted);
}
.addons-price {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 600;
  font-family: var(--font-head);
}

@media (max-width: 600px) {
  .addons-list li {
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
  }
}

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footer-inner p { color: var(--text-muted); font-size: 0.88rem; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-links a {
  color: var(--text-muted);
  font-size: 0.88rem;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--primary); }

/* ===== Legal pages ===== */
.legal-page { padding-top: 64px; }
.legal-content { max-width: 720px; }
.legal-updated {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 8px;
  margin-bottom: 32px;
}
.legal-content h1 { margin-bottom: 0; }
.legal-content h2 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 10px;
}
.legal-content p {
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 4px;
}
.legal-content a { color: var(--primary); text-decoration: underline; }

/* ===== Payment page (private, noindex — shared by direct link only) ===== */
.payment-page { padding-top: 56px; }
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.payment-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 44px 40px;
  text-align: center;
}
.payment-desc {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 1.02rem;
}
.payment-amount {
  margin-top: 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3rem;
  color: var(--text);
}

.payment-toggle {
  display: flex;
  gap: 8px;
  margin: 28px auto 0;
  padding: 4px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  max-width: 360px;
}
.payment-toggle-btn {
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: calc(var(--radius) - 6px);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.payment-toggle-btn[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.payment-details {
  margin-top: 28px;
  text-align: left;
}
.payment-details-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 16px;
  text-align: center;
}
.payment-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.payment-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.payment-field dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.payment-field dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  word-break: break-word;
}
.payment-note {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
}
.payment-missing {
  margin-top: 24px;
  padding: 16px 20px;
  background: #FFF7ED;
  border: 1px solid #FBD9B4;
  border-radius: var(--radius);
  color: #92400E;
  font-size: 0.9rem;
  text-align: left;
}
.payment-missing code {
  font-family: var(--font-mono, monospace);
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.payment-status {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--primary-dark);
}

.payment-qr-wrap {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.payment-qr {
  width: 160px;
  margin: 0 auto;
}
.payment-qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.payment-qr-caption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}
.payment-qr-note {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.payment-howto {
  width: 100%;
  max-width: 560px;
}
.payment-howto-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 16px;
}
.payment-howto-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: howto-step;
}
.payment-howto-list li {
  position: relative;
  padding-left: 36px;
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.5;
  counter-increment: howto-step;
}
.payment-howto-list li::before {
  content: counter(howto-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 600px) {
  .payment-card { padding: 32px 24px; }
  .payment-amount { font-size: 2.4rem; }
  .payment-toggle { max-width: 100%; }
}