/* ==========================================================================
   Viibe - design tokens
   ========================================================================== */
:root {
  --ink: #111111;
  --ink-soft: #47483f;
  --ink-faint: #7a7b71;
  --white: #ffffff;
  --bg-soft: #f7f7f5;
  --bg-soft-2: #f0f0ec;
  --border: #e6e6e1;
  --border-strong: #d8d8d2;

  --accent: #a2761b;
  --accent-dark: #7c580f;
  --accent-soft: #f5edd9;
  --accent-soft-2: #e9d8b1;
  --star-gold: #d9a200;
  --gold-btn: #c1932b;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-md: 0 8px 24px rgba(17,17,17,0.08), 0 2px 6px rgba(17,17,17,0.05);
  --shadow-lg: 0 24px 64px rgba(17,17,17,0.14), 0 8px 24px rgba(17,17,17,0.08);
  --shadow-card: 0 20px 40px -18px rgba(17,17,17,0.24);

  --container: 1180px;
  --nav-h: 96px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.45,0,.2,1);

  --hero-phone-shift-x: -30px;
  --hero-phone-shift-y: 38px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; zoom: 1.25; overscroll-behavior-y: none; }
/* zoom is non-standard and known-flaky on iOS Safari - especially with
   position:fixed/sticky elements and backdrop-filter, both used heavily
   in the mobile nav/CTA bar. Desktop keeps the 1.25 scale from the Viibe
   theme port; mobile renders at true 100% instead. */
@media (max-width: 640px) { html { zoom: 1; } }
/* In-app browsers (Facebook/Instagram/Messenger/LinkedIn/Snapchat/TikTok/X)
   report normal mobile widths but render `zoom` inconsistently, breaking
   scroll around the fixed/sticky nav - see includes/head.php for the
   detection script. Force zoom off there regardless of viewport width. */
html.iab { zoom: 1; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  overscroll-behavior-y: none;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.skip-link {
  position: absolute; left: 0; top: -48px;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Page-load reveal
   ========================================================================== */
body { opacity: 1; transition: opacity .5s var(--ease-out); }
html.preload body { opacity: 0; transition: none; }
.loader {
  position: fixed; inset: 0; z-index: 300; background: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-out);
}
html.preload .loader { opacity: 1; pointer-events: auto; }
.loader__mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); opacity: 0; }
html.preload .loader__mark { animation: loader-in .5s var(--ease-out) forwards; }
@keyframes loader-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Grain texture (subtle, for dark sections)
   ========================================================================== */
.grain { position: relative; }
.grain::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

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

.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 3.8vw, 46px); }
#tiim .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.team-title-slide {
  opacity: 0; transform: translateX(-90px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: transform, opacity;
}
.team-title-slide.is-visible { opacity: 1; transform: translateX(0); }
.section-lead { margin-top: 16px; font-size: 17px; color: var(--ink-soft); font-weight: 400; }
.section-lead--muted { color: var(--ink-faint); font-style: italic; }
.tag-soft {
  display: inline-block; margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-dark); padding: 3px 9px; border-radius: 999px;
  vertical-align: middle;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-weight: 600; font-size: 15px;
  padding: 13px 24px; transition: transform .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn--primary {
  background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm);
}
.btn--primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%);
  mix-blend-mode: overlay; pointer-events: none;
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); }
.btn:hover .icon-arrow { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); }
.btn--ghost:hover { border-color: var(--ink); background: var(--bg-soft); transform: translateY(-2px); }
.btn--sm { padding: 9px 18px; font-size: 14px; }
.btn--lg { padding: 15px 30px; font-size: 16px; }
@media (max-width: 480px) {
  .btn--lg { width: 100%; }
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  padding: 16px 20px 0;
  pointer-events: none;
  transition: transform .35s var(--ease-out);
}
.nav-wrap > * { pointer-events: auto; }
.nav-wrap--hidden { transform: translateY(-130%); }
.nav {
  max-width: calc(var(--container) - 24px);
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; padding: 10px 12px 10px 28px;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 2px rgba(17,17,17,0.04);
  transition: box-shadow .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), height .25s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-md);
}
.nav__logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--ink);
}
.logo-mark { display: block; width: 32px; height: 34px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links > a { font-size: 15px; font-weight: 600; color: var(--ink-soft); transition: color .2s var(--ease-out); position: relative; padding-bottom: 2px; }
.nav__links > a:hover { color: var(--ink); }
.nav__links > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out);
}
.nav__links > a.is-active { color: var(--ink); }
.nav__links > a.is-active::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 6px; }

/* Services dropdown */
.nav__dropdown { position: relative; margin-right: -15px; }
.nav__dropdown-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  transition: color .2s var(--ease-out);
}
.nav__dropdown-trigger:hover { color: var(--ink); }
.nav__dropdown-trigger svg { color: var(--ink-faint); transition: transform .25s var(--ease-out); }
.nav__dropdown-trigger[aria-expanded="true"],
.nav__dropdown:hover .nav__dropdown-trigger { color: var(--ink); }
.nav__dropdown-trigger[aria-expanded="true"] svg,
.nav__dropdown:hover .nav__dropdown-trigger svg { transform: rotate(180deg); }
.nav__dropdown-menu {
  position: absolute; top: 100%; left: 50%; min-width: 300px;
  padding-top: 16px; z-index: 20;
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease-out);
}
.nav__dropdown-menu.is-open,
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1; pointer-events: auto;
}
.nav__dropdown-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: 8px;
  transform: translateY(-6px) scale(0.97);
  transition: transform .18s var(--ease-out);
}
.nav__dropdown-menu.is-open .nav__dropdown-panel,
.nav__dropdown:hover .nav__dropdown-menu .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-menu .nav__dropdown-panel {
  transform: translateY(0) scale(1);
}
.nav__dropdown-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; transition: background .15s var(--ease-out); }
.nav__dropdown-item:hover { background: var(--bg-soft); }
.nav__dropdown-item.is-active { background: var(--accent-soft); }
.nav__dropdown-item b { font-size: 14px; font-weight: 700; color: var(--ink); }
.nav__dropdown-item span { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }
/* Cart + language icon buttons */
.nav__icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--ink);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav__icon-btn:hover { background: var(--bg-soft-2); transform: translateY(-1px); }
.nav__cart-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 0 2px #fff;
  transition: transform .3s var(--ease-spring);
}
.nav__cart-badge.is-bump { animation: cart-bump .4s var(--ease-spring); }
@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.nav__lang { position: relative; }
.nav__lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 16px; border-radius: 999px; color: var(--ink);
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.02em;
  transition: background .2s var(--ease-out);
}
.nav__lang-btn:hover { background: var(--bg-soft-2); }
.nav__lang-btn svg { color: var(--ink-faint); }
.nav__lang-btn > svg:last-child { transition: transform .25s var(--ease-out); }
.nav__lang-btn[aria-expanded="true"] > svg:last-child,
.nav__lang:hover .nav__lang-btn > svg:last-child,
.nav__lang:focus-within .nav__lang-btn > svg:last-child { transform: rotate(180deg); }
/* Menu box sits flush at top:100% (no gap) so the hover state doesn't drop
   while moving the cursor down into it; padding-top provides the visual
   offset instead - same technique as .nav__dropdown-menu/.nav__dropdown-panel. */
.nav__lang-menu {
  position: absolute; top: 100%; right: 0; min-width: 168px;
  padding-top: 10px; z-index: 20;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease-out);
}
.nav__lang-panel {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 6px;
  transform: translateY(-6px) scale(0.97);
  transition: transform .18s var(--ease-out);
}
.nav__lang-menu.is-open,
.nav__lang:hover .nav__lang-menu,
.nav__lang:focus-within .nav__lang-menu { opacity: 1; pointer-events: auto; }
.nav__lang-menu.is-open .nav__lang-panel,
.nav__lang:hover .nav__lang-menu .nav__lang-panel,
.nav__lang:focus-within .nav__lang-menu .nav__lang-panel { transform: translateY(0) scale(1); }
.nav__lang-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.nav__lang-option:hover { background: var(--bg-soft); color: var(--ink); }
.nav__lang-option.is-active { color: var(--ink); background: var(--accent-soft); }
.nav__lang-option-label { display: inline-flex; align-items: center; gap: 8px; }
.nav__lang-flag { display: inline-flex; flex-shrink: 0; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,17,17,0.1); }
.nav__lang-flag svg { display: block; width: 100%; height: 100%; }
.nav__lang-soon {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-faint); background: var(--bg-soft-2); padding: 2px 6px; border-radius: 999px;
}

/* Toast (used for the "coming soon" language notice) */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 250;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lg);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
  white-space: nowrap;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  .toast { bottom: 88px; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
}

.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; border-radius: 999px;
}
.nav__burger span {
  width: 20px; height: 2px; background: var(--ink); margin: 0 auto;
  transform-origin: center; backface-visibility: hidden;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transition-duration: .1s; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  max-width: calc(var(--container) - 24px);
  margin: 10px auto 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mobile-menu__links { display: flex; flex-direction: column; padding: 14px 22px 22px; gap: 4px; }
.mobile-menu__links a:not(.btn) { padding: 12px 4px; font-weight: 500; font-size: 16px; border-bottom: 1px solid var(--bg-soft-2); }
.mobile-menu__links .btn { margin-top: 14px; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .nav__lang { display: none; }
}
@media (min-width: 861px) { .mobile-menu { display: none !important; } }
@media (max-width: 480px) {
  :root { --nav-h: 80px; }
  .nav-wrap { padding: 12px 14px 0; }
  .nav { padding: 8px 8px 8px 20px; height: 68px; }
  .nav__logo { font-size: 20px; }
  .logo-mark { width: 26px; height: 28px; }
  .nav__icon-btn { width: 38px; height: 38px; }
}

.mobile-menu__lang {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bg-soft-2);
}
.mobile-menu__lang-label { font-size: 13px; font-weight: 600; color: var(--ink-faint); margin-right: 2px; }
.mobile-menu__lang-btn {
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1.5px solid var(--border-strong); color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.mobile-menu__lang-btn.is-active { border-color: var(--ink); color: var(--ink); background: var(--bg-soft); }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding-top: 24px; padding-bottom: 24px; background: var(--white); overflow: hidden; position: relative;
  min-height: calc(100vh / 1.25 - var(--nav-h)); display: flex; align-items: center;
}
.hero::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: -20%; right: -10%; width: 60%; aspect-ratio: 1/1;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 75%);
  opacity: 0.55; filter: blur(30px);
}
.hero::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg-soft));
}
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: 100%; padding-top: 40px; }
.hero__title { font-size: clamp(38px, 5.2vw, 66px); font-weight: 800; letter-spacing: -0.035em; }
.hero__subtitle { margin-top: 22px; font-size: 18px; color: var(--ink-soft); max-width: 440px; }
.hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-cta-mobile { display: none; }
@media (max-width: 640px) {
  .hero-cta-desktop { display: none; }
  .hero-cta-mobile { display: inline-flex; }
}



.hero__stage { display: flex; justify-content: center; }
.stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.05; transform: translateY(-22px); }
.stage__glow {
  position: absolute; inset: 8% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  filter: blur(6px); z-index: 0;
}

.phone-mock {
  position: relative; width: 100%; aspect-ratio: 9/18.4;
  background: var(--ink); border-radius: 42px; padding: 10px;
  box-shadow: var(--shadow-lg);
}
.hero__stage .phone-mock { position: absolute; right: 4%; top: -2%; width: 49%; z-index: 1; }
.phone-mock__notch {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  width: 24%; height: 9px; background: #000; border-radius: 999px; z-index: 2;
}
.phone-mock__screen { container-type: inline-size; position: relative; width: 100%; height: 100%; background: var(--bg-soft); border-radius: 33px; overflow: hidden; }
.review-ui { position: absolute; inset: 0; padding: 12.7cqw 5.2cqw 5.2cqw; }
.phone-mock__idle {
  position: absolute; inset: 0; padding: 12.7cqw 5.2cqw 5.2cqw;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 15%, var(--accent-soft), var(--bg-soft) 70%);
}
.phone-mock__idle svg { width: 30%; height: auto; color: var(--accent); opacity: 0.5; }

/* ---- Hero NFC-tap loop: phone approaches, waves pulse, screen crossfades ---- */
.hero__stage .phone-mock { animation: hero-phone-move 5.75s var(--ease-out) infinite; }
@keyframes hero-phone-move {
  0%, 10% { transform: translate(0, 0) rotate(0); }
  36%, 64% { transform: translate(var(--hero-phone-shift-x), var(--hero-phone-shift-y)) rotate(-2deg); }
  90%, 100% { transform: translate(0, 0) rotate(0); }
}
.hero__stage .phone-mock__idle { animation: hero-idle-fade 5.75s var(--ease-out) infinite; }
.hero__stage .review-ui { animation: hero-review-fade 5.75s var(--ease-out) infinite; }
@keyframes hero-idle-fade {
  0%, 32% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes hero-review-fade {
  0%, 32% { opacity: 0; }
  42%, 88% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.hero-signal {
  position: absolute; left: 30%; top: 30%; z-index: 2; pointer-events: none;
  width: 1px; height: 1px;
}
.hero-signal__ring {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; animation: hero-signal-ring 5.75s var(--ease-out) infinite;
}
.hero-signal__ring:nth-child(2) { animation-delay: .2s; }
.hero-signal__ring:nth-child(3) { animation-delay: .4s; }
@keyframes hero-signal-ring {
  0%, 33% { transform: scale(1); opacity: 0; }
  38% { opacity: 0.35; }
  62% { transform: scale(6.5); opacity: 0; }
  100% { opacity: 0; }
}
.hero__stage .hero-card { animation: hero-card-react 5.75s var(--ease-out) infinite; }
@keyframes hero-card-react {
  0%, 31% { transform: scale(1); }
  37% { transform: scale(1.045); }
  44%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stage .phone-mock,
  .hero__stage .hero-card,
  .hero__stage .phone-mock__idle,
  .hero-signal { animation: none; }
  .hero-signal { display: none; }
  .hero__stage .phone-mock__idle { opacity: 0; }
  .hero__stage .review-ui { opacity: 1; }
}

/* ---- Real product photo (hero + buybox): pre-cropped to the disc, drop-shadow follows its silhouette instead of a hard box ---- */
.hero-card__photo {
  width: 100%; height: auto;
  filter: drop-shadow(0 22px 34px rgba(17,17,17,0.20)) drop-shadow(0 6px 10px rgba(17,17,17,0.10));
}
.review-ui__bar { font-size: 3.6cqw; color: var(--ink-faint); background: var(--white); border-radius: 999px; padding: 2.2cqw 3.7cqw; margin-bottom: 5.2cqw; border: 1px solid var(--border); }
.review-ui__biz { display: flex; align-items: center; gap: 3.7cqw; margin-bottom: 6cqw; }
.review-ui__avatar { width: 11.2cqw; height: 11.2cqw; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 4.9cqw; font-weight: 700; flex-shrink: 0; }
.review-ui__biz strong { display: block; font-size: 4.5cqw; }
.review-ui__stars { color: var(--star-gold); font-size: 4.5cqw; letter-spacing: 1px; }
.review-ui__label { font-size: 3.9cqw; color: var(--ink-faint); font-weight: 600; margin-bottom: 3cqw; }
.review-ui__lines { background: var(--white); border: 1px solid var(--border); border-radius: 3.7cqw; padding: 3.7cqw; display: flex; flex-direction: column; gap: 2.6cqw; margin-bottom: 5.2cqw; }
.review-ui__lines span { display: block; height: 2.2cqw; border-radius: 1.1cqw; background: var(--bg-soft-2); width: 100%; }
.review-ui__btn { background: var(--ink); color: #fff; text-align: center; font-size: 4.1cqw; font-weight: 600; padding: 3.4cqw; border-radius: 999px; }

/* ---- Google brand-color letter utilities (shared) ---- */
.gc-blue { color: #4285F4; }
.gc-red { color: #EA4335; }
.gc-yellow { color: #FBBC05; }
.gc-green { color: #34A853; }

/* Hero absolute placement wrapper around the product photo */
.tap-badge { position: absolute; left: -2%; bottom: 22%; width: 52%; z-index: 0; }
.tap-badge--float { animation: float 5.5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.tap-ping {
  position: absolute; left: 6%; bottom: 30%; width: 26px; height: 26px; z-index: 3;
  border: 2px solid var(--accent); border-radius: 50%;
  animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping {
  0% { transform: scale(0.4); opacity: 0.9; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Stand badge - reusable desk-stand card mockup ---- */
.stand-badge { container-type: inline-size; position: relative; display: flex; flex-direction: column; align-items: center; }
.stand-badge__plate {
  position: relative; width: 100%; aspect-ratio: 0.92/1; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 8% 7% 7%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5cqw;
  text-align: center; transform: perspective(800px) rotateX(7deg); transform-origin: bottom center;
}
.stand-badge__label { font-size: 7cqw; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; }
.stand-badge__ring {
  width: 56%; aspect-ratio: 1/1; border-radius: 50%;
  background: conic-gradient(from 0deg, #EA4335 0deg 90deg, #FBBC05 90deg 180deg, #34A853 180deg 270deg, #4285F4 270deg 360deg);
  padding: 3.2%; display: flex; align-items: center; justify-content: center;
}
.stand-badge__ring-face {
  width: 100%; height: 100%; border-radius: 50%; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw;
}
.stand-badge__ring-face svg { width: 30%; height: auto; color: var(--ink); }
.stand-badge__ring-face span { font-size: 4.6cqw; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; }
.stand-badge__google { font-size: 10cqw; font-weight: 800; line-height: 1; }
.stand-badge__stars { color: var(--star-gold); font-size: 6.2cqw; letter-spacing: 0.12em; line-height: 1; }
.stand-badge__bar {
  width: 86%; height: 3px; border-radius: 3px; margin-top: 2.5cqw;
  background: linear-gradient(90deg, #EA4335 0% 33%, #FBBC05 33% 66%, #34A853 66% 100%);
}
.stand-badge__foot {
  width: 44%; height: 13px; margin-top: -2px;
  background: linear-gradient(180deg, #e6e6e1, #cfcfc9);
  clip-path: polygon(14% 0%, 86% 0%, 100% 100%, 0% 100%);
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; padding-top: 8px; }
  .hero__subtitle { max-width: none; }
  .stage { max-width: 340px; }
  :root { --hero-phone-shift-x: -20px; --hero-phone-shift-y: 25px; }
}
@media (max-width: 640px) {
  .hero {
    /* Fill the screen (next section starts only on scroll) but anchor
       content a little below the nav instead of dead-centering it -
       centering left equal, large empty gaps above AND below the
       content in a tall box, which read as "lost" rather than designed. */
    padding-top: 15vh;
    align-items: flex-start;
    min-height: calc(100vh - var(--nav-h));
  }
  @supports (height: 100svh) {
    /* svh (small viewport height) is fixed at the smallest the browser
       chrome ever leaves - unlike dvh/vh, which recalculate live as the
       address bar shows/hides on scroll and made the hero's height AND
       its top padding visibly shift mid-scroll. Pin both to svh so the
       content never nudges as you scroll. */
    .hero { padding-top: 15svh; min-height: calc(100svh - var(--nav-h)); }
  }
  /* iOS in-app browsers (Facebook/Snapchat/LinkedIn/...) sit their own
     toolbar on top of the page without svh accounting for it, so the
     screen-filling hero ends up taller than what's actually visible -
     see includes/head.php, which measures the real visible height via
     visualViewport and exposes it as --real-vh for exactly these UAs. */
  html.iab .hero { padding-top: calc(var(--real-vh, 1vh) * 15); min-height: calc(var(--real-vh, 1vh) * 100 - var(--nav-h)); }
  .hero__title { font-size: clamp(26px, 9vw, 40px); }
  .stage {
    max-width: min(78vw, 280px); aspect-ratio: auto;
    display: flex; justify-content: center; transform: translateY(-14px);
  }
  .hero__stage { margin-bottom: -4px; }
  /* Drop the phone-mock + signal-ring composition on phones - its
     tap-in animation doesn't read cleanly at this size. Just let the
     product card float on its own, larger and easier to read. */
  .hero__stage .phone-mock,
  .hero-signal { display: none; }
  .tap-badge {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 80%; max-width: 260px;
  }
}
@media (max-width: 480px) {
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }
}

/* ==========================================================================
   Problem - headline + lifestyle photo with a floating stat card
   ========================================================================== */
.problem {
  background: var(--bg-soft);
  padding: 64px 0 40px;
}
@media (max-width: 640px) {
  .problem { padding: 40px 0 64px; }
}

.problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: stretch; min-height: 480px; }
.problem__copy { display: flex; flex-direction: column; justify-content: center; }
.problem__copy h2 { font-size: clamp(36px, 4.6vw, 56px); }
.problem__copy .section-lead { font-size: 19px; line-height: 1.6; max-width: 480px; margin-top: 22px; }
.problem__copy .btn { margin-top: 28px; align-self: flex-start; }
@media (max-width: 640px) {
  .problem__copy h2 br { display: none; }
  .problem__copy h2 { font-size: clamp(26px, 7.5vw, 36px); }
}

.problem__visual { position: relative; min-height: 340px; order: -1; }
.problem__visual::before {
  content: ''; position: absolute; inset: -8%; z-index: 0; border-radius: var(--radius-xl);
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity: 0.7; filter: blur(24px);
}
.problem__photo {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.problem__stat-card {
  position: absolute; z-index: 2; left: 28px; bottom: 28px; max-width: 240px;
  background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 6px;
}
.problem__stat-card-num {
  display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(32px, 3.8vw, 42px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink);
}
.problem__stat-card-arrow { color: var(--accent); font-size: 0.6em; }
.problem__stat-card-label { font-size: 13px; font-weight: 600; color: var(--ink-faint); line-height: 1.35; }

@media (max-width: 900px) {
  .problem__grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; }
  .problem__copy { text-align: left; }
  .problem__visual { aspect-ratio: 4/3; min-height: 0; max-width: 100%; }
  /* The card in the photo sits centered/lower in frame; anchoring the
     stat badge to the bottom on a narrow cropped photo covers it. Top
     corner stays clear at every mobile width. */
  .problem__stat-card { left: 20px; right: auto; bottom: auto; top: 20px; }
}
@media (max-width: 480px) {
  .problem__copy .btn { width: 100%; align-self: stretch; }
  .problem__stat-card { left: 14px; top: 14px; padding: 14px 18px; max-width: 180px; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.how { background: var(--bg-soft); }
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.how__progress {
  position: absolute; left: 8%; right: 8%; top: 0; height: 2px; z-index: 0;
  background: var(--border);
  display: none;
}
.how__progress-fill {
  display: block; height: 100%; width: 0%; background: var(--accent);
  transition: width 1.1s cubic-bezier(.5,.05,.3,1);
}
.how__step {
  position: relative; z-index: 1;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .6s cubic-bezier(.45,.05,.3,1), box-shadow .6s cubic-bezier(.45,.05,.3,1), border-color .6s cubic-bezier(.45,.05,.3,1);
}
.how__step:hover, .how__step.is-current { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.how__step.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-lg); }
@media (min-width: 861px) {
  .how__progress { display: block; }
}
.how__visual {
  aspect-ratio: 4/3; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.how__visual .hero-card__photo { position: relative; width: 220px; }
.how__body { padding: 24px 26px 28px; }
.how__num { display: inline-block; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 16px; }
.how__step h3 { font-size: 19px; margin-bottom: 10px; }
.how__step p { font-size: 14.5px; color: var(--ink-soft); }

.how__visual--tap .hero-card__photo { width: 200px; }
.how__visual--tap .tap-ping { position: absolute; left: 50%; top: 50%; width: 118px; height: 118px; margin: -59px 0 0 -59px; }

.how__visual--phone .phone-mock {
  width: 124px; padding: 5px; border-radius: 22px;
  box-shadow: 0 24px 40px -18px rgba(17,17,17,0.35);
  position: relative; z-index: 1;
  transition: transform .3s var(--ease-out);
}
.how__visual--phone .phone-mock__notch { top: 8px; height: 4px; }
.how__visual--phone .phone-mock__screen { border-radius: 17px; }

/* Steps 02 and 03 both show a phone mockup - tilt them opposite ways and
   give the "done" one a glow + badge so the pair reads as two distinct
   moments rather than a duplicated screenshot. */
.how__visual--phone:not(.how__visual--done) .phone-mock { transform: rotate(-5deg); }
.how__visual--done .phone-mock { transform: rotate(4deg); }

.how__visual--done::before {
  content: ''; position: absolute; inset: 8%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity: 0.9; filter: blur(10px);
}

.how__done-badge {
  position: absolute; z-index: 3; right: 16%; bottom: 16%;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); border: 3px solid var(--white);
}
.how__step.is-current .how__visual--done .how__done-badge {
  animation: how-badge-pop .5s var(--ease-spring);
}
@keyframes how-badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .how__step.is-current .how__visual--done .how__done-badge { animation: none; }
}

@media (max-width: 860px) {
  .how__steps { grid-template-columns: 1fr; gap: 16px; }
  /* .how__visual keeps a 4/3 box, but on the full-width single-column
     mobile card that box is shorter relative to its width than on the
     narrow 3-up desktop cards - the fixed 124px-wide (~254px-tall)
     phone mockup no longer fits inside it and gets clipped, worse once
     rotated. Drive its size off the box height instead of a fixed width. */
  .how__visual--phone .phone-mock { width: auto; height: min(150px, 62%); }
}

/* ==========================================================================
   Product showcase - single centered product, Apple-style
   ========================================================================== */
.showcase { background: var(--bg-soft); padding: 48px 0 0; text-align: center; overflow: hidden; }
@media (max-width: 640px) { .showcase { padding: 32px 0 0; } }

.showcase__center { max-width: 560px; margin: 0 auto; }
.showcase__center .eyebrow { justify-content: center; }
.showcase__center h2 { font-size: clamp(30px, 4vw, 48px); }
.showcase__center .section-lead { max-width: 460px; margin-left: auto; margin-right: auto; }

.showcase__cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; }
@media (max-width: 480px) {
  .showcase__cta-row { flex-direction: column; width: 100%; }
  .showcase__cta-row .btn { width: 100%; }
}

.showcase__hero { display: flex; justify-content: center; margin-top: 8px; }
.showcase__hero-img {
  width: 100%; max-width: clamp(480px, 80vw, 1080px); height: auto; display: block;
}
@media (max-width: 640px) { .showcase__hero { margin-top: 12px; } }

/* ==========================================================================
   Why Viibe - van journey through 4 points, plays once on scroll-into-view
   ========================================================================== */
.why-love { background: var(--white); padding: 100px 0; }
@media (max-width: 640px) { .why-love { padding: 64px 0; } }
.why-love .eyebrow { margin-bottom: 40px; }
@media (max-width: 640px) { .why-love .eyebrow { margin-bottom: 28px; } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing { background: var(--bg-soft); padding: 128px 0; }
@media (max-width: 640px) { .pricing { padding: 72px 0; } }

.buybox {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: 44px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start;
}
.buybox__visual { display: flex; flex-direction: column; align-items: center; gap: 20px; position: sticky; top: 100px; }
.buybox__stage { width: 100%; max-width: 232px; position: relative; }
.buybox__visual [hidden] { display: none; }
.buybox__stage [data-format-panel] {
  opacity: 0; transform: scale(0.94);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.buybox__stage [data-format-panel].is-shown { opacity: 1; transform: scale(1); }

.format-toggle { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 4px; gap: 2px; }
.format-toggle__btn { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); transition: background .18s var(--ease), color .18s var(--ease); }
.format-toggle__btn.is-active { background: var(--ink); color: #fff; }

.buybox__purchase { display: flex; flex-direction: column; gap: 26px; }
.buybox__title h3 { font-size: 22px; margin-bottom: 6px; }
.buybox__title p { font-size: 14px; color: var(--ink-faint); }

.price-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.price-tier {
  background: var(--white); border: 1.5px solid var(--border); border-radius: 16px; padding: 18px 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  position: relative;
}
.price-tier:hover { transform: translateY(-2px); }
.price-tier--active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.price-tier__badge {
  position: absolute; top: -11px; right: 12px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.price-tier__qty { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.price-tier__price { font-size: 22px; font-weight: 800; }
.price-tier__unit { font-size: 11.5px; color: var(--ink-faint); }

.buybox__list { display: flex; flex-direction: column; gap: 11px; }
.buybox__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); font-weight: 500; }

.buybox__cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--border);
}
.buybox__total { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.buybox__total-hint { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

.buybox__trust { display: flex; flex-wrap: wrap; gap: 9px 20px; }
.buybox__trust li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.buybox__trust svg { color: var(--accent); flex-shrink: 0; }

.buybox__previews {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
  width: 100%; max-width: 280px;
}
.buybox__previews img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.buybox__previews img:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  .buybox { grid-template-columns: 1fr; padding: 30px 22px; gap: 32px; }
  .buybox__visual { position: static; }
  .price-tiers { grid-template-columns: repeat(2, 1fr); }
  .buybox__cta-row { flex-direction: column; align-items: stretch; }
  .buybox__cta-row .btn { width: 100%; }
  .format-toggle__btn { padding: 10px 16px; }
}
@media (max-width: 420px) {
  .buybox { padding: 24px 16px; }
  .price-tiers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Process journey ("Kuidas me töötame?")
   ========================================================================== */
.journey { --steps: 5; position: relative; margin-top: 16px; }
.journey__steps {
  list-style: none; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(var(--steps), 1fr); column-gap: 0;
  padding-top: 60px;
}
.journey__line {
  /* Nodes sit at the left edge of each of the --steps equal-width columns
     (0%, 20%, ... 80% for 5), not centered - so the line must stop at the
     last column's start (100% - 100%/steps), not run to the container's edge. */
  position: absolute; top: 28px; left: 0; right: calc(100% / var(--steps)); height: 2px;
  background: var(--border); border-radius: 999px; overflow: hidden;
}
.journey__line-fill {
  --p: 0;
  display: block; width: 100%; height: 100%; transform: scaleX(var(--p)); transform-origin: left;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  will-change: transform;
  transition: transform 1.7s linear;
}
.journey__step { position: relative; text-align: left; padding-right: 20px; }
.journey__node {
  position: absolute; top: -32px; left: 0; margin-top: -18px; z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--white); border: 1.5px solid var(--border-strong);
  color: var(--ink-faint);
  /* Never scale below 1: shrinking pulls the circle in from its edges
     (it's anchored at left:0 to line up with the line), which would
     expose a sliver of the line poking out past the shrunk edge. */
  transform: scale(1);
  transition: transform .5s var(--ease-spring), background .45s var(--ease-smooth), border-color .45s var(--ease-smooth), color .45s var(--ease-smooth), box-shadow .5s var(--ease-smooth);
}
.journey__node svg { width: 16px; height: 16px; }
.journey__content {
  padding-top: 4px; opacity: .4; transform: translateY(10px); filter: blur(3px);
  transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth), filter .6s var(--ease-smooth);
}
.journey__count { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 10px; transition: color .45s var(--ease-smooth); }
.journey__count i { font-style: normal; opacity: .5; margin: 0 2px; }
.journey__step h3 { font-size: 18px; margin-bottom: 6px; transition: color .45s var(--ease-smooth); }
.journey__step p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 26ch; }

.journey__step.is-done .journey__content,
.journey__step.is-active .journey__content { opacity: 1; transform: translateY(0); filter: blur(0); }
.journey__step.is-done .journey__node { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
.journey__step.is-done .journey__count { color: var(--accent-dark); }

.journey__step.is-active .journey__node {
  background: var(--white); border-color: var(--accent); color: var(--accent-dark); transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.journey__step.is-active .journey__count { color: var(--accent); }
.journey__step.is-active h3 { color: var(--accent-dark); }

.journey--static .journey__content { opacity: 1; transform: none; filter: none; }
.journey--static .journey__node { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }

@media (max-width: 860px) {
  .journey__steps { grid-template-columns: 1fr; row-gap: 36px; padding-top: 0; }
  .journey__line { top: 6px; bottom: 6px; left: 5px; right: auto; width: 2px; height: auto; }
  .journey__line-fill { transform: scaleY(var(--p)); transform-origin: top; transition: transform 1.7s linear; }
  .journey__step { padding-left: 40px; padding-right: 0; }
  .journey__node { top: 6px; left: 5px; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .journey__node svg { width: 13px; height: 13px; }
  .journey__step p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .journey__content { transition: none; opacity: 1; transform: none; filter: none; }
  .journey__node { transition: none; animation: none; }
}

/* ==========================================================================
   FAQ / accordion
   ========================================================================== */
.faq { background: var(--white); }
.accordion__item {
  border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden;
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.accordion__item:hover { border-color: var(--border-strong); }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]) {
  background: var(--bg-soft); border-color: var(--accent-soft-2); box-shadow: var(--shadow-sm);
}
.accordion__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 18px; font-size: 16px; font-weight: 600; text-align: left;
  transition: color .2s var(--ease-out);
}
.accordion__item:hover .accordion__trigger { color: var(--accent-dark); }
.accordion__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border-strong); color: var(--ink-faint);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-spring);
}
.accordion__item:hover .accordion__icon { border-color: var(--accent); color: var(--accent); }
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  background: var(--accent); border-color: var(--accent); color: var(--white); transform: rotate(180deg);
}
.accordion__panel {
  max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out);
}
.accordion__panel p { padding: 0 18px 20px; font-size: 14.5px; color: var(--ink-soft); max-width: 640px; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  background: var(--ink); color: #fff; text-align: center; padding: 84px 0; position: relative;
  background-image: radial-gradient(circle at 50% 0%, rgba(193,147,43,0.30), transparent 55%);
  overflow: hidden;
}
.final-cta h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 18px; position: relative; z-index: 2; }
.final-cta p { font-size: 17px; color: rgba(255,255,255,0.65); margin-bottom: 30px; position: relative; z-index: 2; }
.final-cta .btn--primary { background: var(--accent); position: relative; z-index: 2; }
.final-cta .btn--primary:hover { background: var(--white); color: var(--ink); }
@media (max-width: 640px) {
  .final-cta { padding: 72px 0; }
  .final-cta h2 br { display: none; }
  .final-cta h2 { font-size: clamp(24px, 7vw, 34px); }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--white); border-top: 1px solid var(--border); padding-top: 64px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px 40px; padding-bottom: 48px; }
.footer__brand p { margin-top: 14px; font-size: 14px; color: var(--ink-faint); max-width: 320px; }
.nav__logo--footer { margin-bottom: 4px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 6px; }
.footer__col a { font-size: 14.5px; color: var(--ink-soft); transition: color .15s; }
.footer__col a:hover { color: var(--ink); }
.footer__col span { font-size: 14.5px; color: var(--ink-soft); }
/* padding-top/bottom only - .footer__bottom shares its element with
   .container, and the `padding` shorthand here was overwriting
   .container's own 24px side padding entirely (same specificity, later
   in the file wins), letting the copyright text run to the screen
   edges on narrow viewports. */
.footer__bottom { border-top: 1px solid var(--border); padding-top: 22px; padding-bottom: 22px; text-align: center; }
.footer__bottom p { font-size: 13px; color: var(--ink-faint); }
.footer__bottom p.footer__reg { margin-top: 4px; font-size: 12px; color: var(--border-strong); }
@media (max-width: 980px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal { padding: 64px 0 100px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.legal .legal__updated { font-size: 13px; color: var(--ink-faint); margin-bottom: 40px; }
.legal h2 { font-size: 19px; margin: 36px 0 12px; }
.legal p, .legal li { font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal__placeholder { background: var(--accent-soft); color: var(--accent-dark); padding: 1px 6px; border-radius: 5px; font-weight: 600; }

/* ==========================================================================
   CALIORA APPENDIX - Viibe theme applied to Caliora's own pages
   ========================================================================== */

/* legacy aliases so sub-page templates inherit the Viibe system */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

.section-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.section-alt { background: var(--bg-soft); }
.center-wrap { display: flex; justify-content: center; margin-top: 40px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.button-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; font-weight: 600; font-size: 15px; padding: 13px 24px;
  background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  border: 1.5px solid transparent; white-space: nowrap;
}
.button-pill:hover { background: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.button-pill.is-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); box-shadow: none; }
.button-pill.is-outline:hover { border-color: var(--ink); background: var(--bg-soft); }
.icon-arrow { flex: none; transition: transform .25s var(--ease-out); }
.icon-arrow--left { transform: scaleX(-1); }
.button-pill:hover .icon-arrow, .blog-post-card:hover .icon-arrow { transform: translateX(3px); }
.button-pill:hover .icon-arrow--left, .blog-post-card:hover .icon-arrow--left { transform: scaleX(-1) translateX(3px); }
.sp-back-btn { padding: 7px 16px 7px 13px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border-color: var(--border); }
.sp-back-btn svg { width: 11px; height: 11px; }
.sp-back-btn:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--bg-soft); }

.sp-breadcrumb { display: inline-flex; align-items: center; min-width: 0; gap: 9px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); font-size: 13px; }
.sp-breadcrumb__home { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 600; color: var(--ink-soft); }
.sp-breadcrumb__home svg { flex: none; }
.sp-breadcrumb__home:hover { color: var(--accent-dark); }
.sp-breadcrumb__sep { flex: none; color: var(--border-strong); }
.sp-breadcrumb__current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-weight: 500; }

/* Caliora gold: primary buttons are gold foil with ink text (not black) */
.btn--primary, .button-pill:not(.is-outline) { background: var(--gold-btn); color: var(--ink); }
.btn--primary:hover, .button-pill:not(.is-outline):hover {
  background: var(--accent); color: var(--ink);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.final-cta .btn--primary { background: var(--gold-btn); color: var(--ink); }
.final-cta .btn--primary:hover { background: var(--white); color: var(--ink); }
.brand-mark { width: 24px; height: 24px; }
.footer__email { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: border-color .15s var(--ease-out); }
.footer__email:hover { border-color: var(--ink); }

/* Hero stage: framed screenshot(s) + floating stat card */
.hero__stage { display: flex; justify-content: center; align-items: flex-start; }
.hero-stack { position: relative; width: 100%; max-width: 500px; aspect-ratio: 4 / 3.75; }
.hero-figure {
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.3; background: var(--bg-soft-2);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-stack .hero-figure {
  position: absolute; width: 82%;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.hero-stack .hero-figure--back {
  top: 0; right: 0; z-index: 1;
  transform: rotate(4deg);
}
.hero-stack .hero-figure--front {
  left: 0; bottom: 0; z-index: 2;
}
.hero-stack:hover .hero-figure--back { transform: rotate(6deg) translate(4px, -4px); }
.hero-stack:hover .hero-figure--front { transform: translate(-4px, 4px); }
/* Drop the project-screenshot stack below the fold on narrow screens - it
   pushed the client marquee (the section right after .hero) a full extra
   screen down instead of it following straight after the copy. */
@media (max-width: 980px) { .hero__stage { display: none; } }
/* Services - premium bento cards with per-service animated icons + inline modal detail */
.service-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; padding: 34px 30px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
  opacity: 0; transform: translateY(16px);
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out),
    border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.service-card.is-active { opacity: 1; transform: translateY(0); }
.service-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 100% 0%, var(--accent-soft), transparent 60%);
  transition: opacity .4s var(--ease-out);
}
.service-card:hover, .service-card:focus-visible {
  transform: translateY(-4px) scale(1.012); border-color: var(--accent-soft-2); box-shadow: var(--shadow-md);
}
.service-card:hover::before, .service-card:focus-visible::before { opacity: 1; }
.service-card__num {
  position: absolute; top: 14px; right: 22px; z-index: 0; pointer-events: none;
  font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--border); opacity: .8; transition: color .3s var(--ease-out);
}
.service-card:hover .service-card__num { color: var(--accent-soft-2); }
.service-card__visual {
  position: relative; z-index: 1; width: 46px; height: 46px; margin-bottom: 18px; color: var(--accent-dark);
}
.service-card__visual svg { width: 100%; height: 100%; display: block; }
.service-card__title { position: relative; z-index: 1; font-size: 19px; margin-bottom: 8px; padding-right: 50px; }
.service-card__desc {
  position: relative; z-index: 1; font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; max-width: 44ch;
  opacity: .82; transform: translateY(3px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.service-card:hover .service-card__desc { opacity: 1; transform: translateY(0); }
.service-card__cta {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 20px; font-size: 13.5px; font-weight: 700; color: var(--ink-faint);
  transition: color .25s var(--ease-out);
}
.service-card__cta svg { transition: transform .3s var(--ease-out); }
.service-card:hover .service-card__cta { color: var(--accent-dark); }
.service-card:hover .service-card__cta svg { transform: translate(3px, -3px); }
/* :hover never fires on touch, so the CTA would otherwise stay permanently
   dim gray on phones - give touch devices the "hovered" look by default. */
@media (hover: none) { .service-card__cta { color: var(--accent-dark); } }

/* per-icon micro-animations, hover-triggered only */
.sv-a, .sv-b { transform-origin: left center; transform: scaleX(.82); transition: transform .45s var(--ease-out); }
.service-card:hover .sv-a { transform: scaleX(1); }
.service-card:hover .sv-b { transform: scaleX(1); transition-delay: .08s; }
.sv-cursor { transition: opacity .2s var(--ease-out); }
.service-card:hover .sv-cursor { animation: sv-cursor-blink 1s step-end infinite; }
.sv-pulse { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset .7s var(--ease-out); }
.service-card:hover .sv-pulse { stroke-dashoffset: 0; }
.sv-blink, .sv-blink2 { transition: opacity .2s var(--ease-out); }
.service-card:hover .sv-blink { animation: sv-blink-op 1.2s ease-in-out infinite; }
.service-card:hover .sv-blink2 { animation: sv-blink-op 1.2s ease-in-out infinite; animation-delay: .5s; }
.sv-chevron { transition: transform .3s var(--ease-out); }
.service-card:hover .sv-chevron { transform: translateX(3px); }
.sv-shackle { transform-origin: center bottom; transform: translateY(-1.5px); transition: transform .3s var(--ease-spring); }
.service-card:hover .sv-shackle { transform: translateY(0); }
.sv-scan { opacity: 0; }
.service-card:hover .sv-scan { animation: sv-scan-sweep 1.4s ease-in-out; }
@keyframes sv-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sv-blink-op { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes sv-scan-sweep { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }

@media (max-width: 640px) {
  .service-cards { grid-template-columns: 1fr; gap: 14px; }
  .service-card { padding: 24px 22px; }
  .service-card__num { font-size: 42px; }
  .service-card__title { font-size: 17.5px; padding-right: 38px; }
}
@media (prefers-reduced-motion: reduce) { .service-card { opacity: 1; transform: none; } }

/* Closing CTA under the services grid */
.services-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 52px; padding: 32px 32px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.services-cta h3 { font-size: 19px; margin-bottom: 6px; }
.services-cta p { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 640px) { .services-cta { flex-direction: column; align-items: flex-start; padding: 26px 24px; } .services-cta .btn { width: 100%; justify-content: center; } }

/* Service detail modal */
.service-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.service-modal[hidden] { display: none; }
body.service-modal-open { overflow: hidden; }
.service-modal__backdrop {
  position: absolute; inset: 0; background: rgba(17,17,17,0.55); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.service-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 42px 38px; opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-spring);
}
.service-modal.is-open .service-modal__backdrop { opacity: 1; }
.service-modal.is-open .service-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
.service-modal__close {
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.service-modal__close:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.service-modal__eyebrow { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 10px; }
.service-modal__body h3 { font-size: 26px; margin-bottom: 14px; padding-right: 30px; }
.service-modal__lead { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 22px; }
.service-modal__points { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.service-modal__points li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink); }
.service-modal__points li::before { content: "\2713"; color: var(--accent); font-weight: 700; flex-shrink: 0; }
.service-modal__fits { font-size: 14px; color: var(--ink-soft); background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 26px; }
.service-modal__fits strong { color: var(--ink); }
.service-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.service-modal__cta { flex: 1; justify-content: center; white-space: nowrap; }
.service-modal__actions .btn--ghost { flex: 1; justify-content: center; white-space: nowrap; }
@media (max-width: 640px) {
  /* .service-modal itself stays an unconstrained fixed inset:0 box, so its
     backdrop always covers the full page with no gap at the edges. The
     sheet is pinned to the viewport independently (not flex-aligned inside
     a height-capped parent) so the two can't get out of sync. */
  .service-modal { padding: 0; }
  .service-modal__panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-width: none; width: 100%; max-height: none; overflow-y: visible;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
  }
  /* Drag-handle affordance for the bottom-sheet look on phones */
  .service-modal__panel::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 999px; background: var(--border-strong);
    pointer-events: none;
  }
  .service-modal__close { top: 16px; right: 16px; width: 32px; height: 32px; }
  .service-modal__body h3 { font-size: 21px; margin-bottom: 10px; padding-right: 26px; }
  .service-modal__lead { font-size: 14.5px; margin-bottom: 18px; }
  .service-modal__points { gap: 8px; margin-bottom: 18px; }
  .service-modal__fits { padding: 12px 14px; margin-bottom: 20px; }
  .service-modal__actions { flex-direction: column; }
  .service-modal__cta, .service-modal__actions .btn--ghost { flex: none; width: 100%; }
}

/* Clients - infinite logo marquee, sits as a thin trust band right under the hero */
.client-marquee-section { padding: 48px 0 16px; }
.client-marquee-head { text-align: center; margin-bottom: 24px; }
.client-marquee-head .eyebrow { margin-bottom: 6px; }
.client-marquee-title { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
/* No mask-image here: on iOS WebKit a mask over a wide, compositor-animated
   track (plus the page-wide html zoom) made the track stop painting tiles
   after a scroll jump (e.g. the hero "Tutvu teenustega" anchor), so logos
   vanished. The edge fade is drawn with plain gradient overlays instead. */
.client-marquee {
  position: relative; overflow: hidden; padding: 20px 0 12px;
}
.client-marquee::before, .client-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 1; pointer-events: none;
}
.client-marquee::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(255,255,255,0)); }
.client-marquee::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(255,255,255,0)); }
/* Two identical groups side by side, each sliding left by exactly 100% of
   its own width. The spacing lives in padding-right (not just gap) so a
   group's width includes the gap that follows its last logo - otherwise the
   loop distance is half a gap off and the band visibly jumps every cycle. */
.client-marquee__track { display: flex; width: max-content; --marquee-gap: 112px; --marquee-duration: 56s; }
.client-marquee__group {
  display: flex; align-items: center; flex-shrink: 0;
  gap: var(--marquee-gap); padding-right: var(--marquee-gap);
  animation: client-marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Paused via JS (see main.js) rather than a plain :hover rule - scrolling the
   page with a stationary cursor makes the browser re-match :hover as the band
   slides underneath it, freezing the animation for a few hundred ms even
   though the user never meant to hover it. */
.client-marquee__track.is-paused .client-marquee__group { animation-play-state: paused; }
/* With JS the whole track is moved frame by frame (endless loop, see
   main.js); the CSS animation above is only the no-JS fallback. */
.client-marquee__track.is-js { will-change: transform; }
.client-marquee__track.is-js .client-marquee__group { animation: none !important; will-change: auto; }
.client-marquee__logo { flex-shrink: 0; height: 64px; display: flex; align-items: center; }
.client-marquee__logo img {
  height: 100%; width: auto; display: block; filter: grayscale(1); opacity: .55;
  transition: filter .3s var(--ease-out), opacity .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .client-marquee__logo:hover img { filter: grayscale(0); opacity: 1; }
}
/* Touch: purely decorative - no tap/hover states, touches pass through. */
@media (hover: none), (pointer: coarse) {
  .client-marquee__track { pointer-events: none; -webkit-user-select: none; user-select: none; }
}
.client-marquee__logo--ccs-pluss img { height: 78%; }
@keyframes client-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (max-width: 640px) {
  /* The track is shorter on mobile (smaller logos/gap) but kept the
     desktop-length duration, so it visibly crept along - same
     travel time over a shorter distance reads as sluggish. */
  .client-marquee__track { --marquee-gap: 64px; --marquee-duration: 23s; }
  .client-marquee__logo { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee__group { animation-duration: var(--marquee-duration) !important; animation-iteration-count: infinite !important; }
}

/* About */
.about__grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: start; }
.about__lead { font-size: 19px; color: var(--ink); font-weight: 500; }
.about__body { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.about__body p { font-size: 15px; color: var(--ink-soft); }
.about__figure { border-radius: var(--radius-lg); overflow: hidden; }
.about__figure img { width: 100%; display: block; }
.about__figcaption { font-size: 12.5px; color: var(--ink-faint); margin: 14px 16px; border-top: 1px solid var(--border); }
@media (max-width: 900px) { .about__grid { grid-template-columns: 1fr; gap: 36px; } }

/* Founders */
.founders { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.founder { display: flex; flex-direction: column; align-items: center; text-align: center; }
.founder__portrait {
  width: 160px; height: 160px; border-radius: 50%; padding: 7px;
  border: 1.5px solid var(--border-strong); margin: 0 auto 18px;
}
.founder__portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.founder__portrait-ph { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; }
.founder__name { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.founder__role { display: block; margin: 4px 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); }
.founder__bio { font-size: 14px; color: var(--ink-soft); line-height: 1.55; max-width: 30ch; margin: 0 auto; }
.founder__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-top: 16px; border-radius: 9px;
  background: var(--bg-soft-2); color: var(--ink-soft);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.founder__social:hover { background: var(--accent-soft); color: var(--accent-dark); }
@media (max-width: 780px) { .founders { grid-template-columns: 1fr; gap: 36px; max-width: 360px; margin: 0 auto; } }

/* Contact - details + form card (form IDs/classes kept for main.js) */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: start; }
.contact-left h1, .contact-left h2 { font-size: clamp(28px, 3.6vw, 44px); }
.ci-list { display: flex; flex-direction: column; gap: 2px; margin: 16px 0; }
.ci-item { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.ci-icon { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); }
.ci-item > span:last-child, .ci-item > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.ci-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.ci-val { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
a.ci-val:hover { color: var(--accent); }
.ci-social { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ci-soc-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 8px 15px; transition: border-color .2s, color .2s; }
.ci-soc-btn:hover { border-color: var(--ink); color: var(--ink); }
.ci-map { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16/8; box-shadow: var(--shadow-sm); }
.ci-map iframe { width: 100%; height: 100%; border: 0; }
.ci-map-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.95); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-sm); }
.cf-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 24px; }
.cf-card-title { font-size: 19px; }
.cf-card > p { font-size: 13px; color: var(--ink-faint); }
.cf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; }
.cf-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.cf-input { width: 100%; padding: 10px 13px; font-size: 14.5px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--bg-soft); color: var(--ink); transition: border-color .2s, background .2s, box-shadow .2s; }
.cf-input::placeholder { color: var(--ink-faint); }
.cf-input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
.cf-textarea { min-height: 90px; resize: vertical; }
.cf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%237a7b71' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.cf-dropdown { position: relative; }
.cf-select--native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.cf-dropdown__trigger { display: block; text-align: left; cursor: pointer; }
.cf-dropdown__trigger[aria-invalid="true"] { border-color: #b4232b; }
.cf-dropdown__list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; max-height: min(260px, 45vh); overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-md); }
.cf-dropdown__list[hidden] { display: none; }
.cf-dropdown__option { padding: 10px 8px; border-radius: 6px; font-size: 14.5px; cursor: pointer; }
.cf-dropdown__option:hover, .cf-dropdown__option.is-active { background: var(--accent-soft); }
.cf-dropdown__option[aria-selected="true"] { font-weight: 600; }
.cf-submit-btn { width: 100%; justify-content: center; margin-top: 4px; }
.cf-success { margin-top: 14px; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out), padding .3s var(--ease-out); }
.cf-success.is-shown { max-height: 200px; padding: 12px 14px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .cf-card { padding: 24px 20px; }
  /* iOS Safari auto-zooms the page on focus for any input under 16px -
     jarring on a form the user is trying to fill in. */
  .cf-input { font-size: 16px; }
}

/* Sub-page shells */
.section.sp-page, .section.projekt-page, .article-layout, .legal-page { max-width: 900px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section.sp-page, .section.projekt-page, .legal-page { padding-top: 140px; }
.breadcrumb, .legal-breadcrumb { font-size: 13px; color: var(--ink-faint); margin-bottom: 20px; }
.breadcrumb a, .legal-breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover, .legal-breadcrumb a:hover { color: var(--ink); }
.legal-breadcrumb span { margin: 0 8px; color: var(--border-strong); }
.sp-topbar, .projekt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.projekt-topbar-meta { display: flex; align-items: center; gap: 12px; }
.projekt-topbar-title { font-size: 14px; font-weight: 600; color: var(--ink-faint); margin: 0; display: inline; line-height: 1.5; letter-spacing: normal; }
.projekt-tag, .sp-topbar .projekt-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.sp-title, .subpage-title { font-size: clamp(32px, 5vw, 50px); letter-spacing: -0.03em; margin-bottom: 26px; }
.sp-title-wrap .sp-title { margin-bottom: 12px; }
.sp-lead { margin-bottom: 8px; font-size: 18px; color: var(--ink-soft); line-height: 1.6; max-width: 640px; }
.section.sp-page { max-width: 760px; }
.sp-hero-banner, .projekt-img, .comparison-slider { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); margin-bottom: 32px; }
.sp-hero-banner-img { width: 100%; display: block; }
.projekt-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.sp-meta-box, .projekt-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 40px; }
.sp-meta-label, .projekt-meta-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 4px; }
.sp-meta-val, .projekt-meta-val { font-size: 15px; font-weight: 600; }
.sp-body, .projekt-body { font-size: 16px; color: var(--ink-soft); line-height: 1.7; }
.sp-section-heading, .projekt-body h2 { font-size: clamp(22px, 2.6vw, 30px); color: var(--ink); margin: 40px 0 14px; }
.sp-body-text, .projekt-body p { margin-bottom: 15px; }
.sp-divider { height: 1px; background: var(--border); margin: 40px 0; }
.sp-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 8px; }
.sp-feature-card { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14.5px; color: var(--ink); }
.sp-feature-icon { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.sp-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; padding-left: 20px; list-style: disc; }
.sp-list li { font-size: 15px; }

/* Service page: text/checklist split (intro + reversed example), and a
   set-apart pain-point callout - breaks the page out of one long column
   of stacked headings/paragraphs. */
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin: 44px 0; }
.sp-split__text .sp-section-heading { margin-top: 0; }
.sp-split__list { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.sp-split__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.sp-check-list__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 11px; font-weight: 700;
}
.sp-split--reverse .sp-split__text { order: 2; }
.sp-split--reverse .sp-split__list { order: 1; }
.sp-callout {
  position: relative; overflow: hidden;
  margin: 48px 0; padding: 30px 32px; background: var(--bg-soft);
  border-left: 3px solid var(--accent); border-radius: var(--radius-md);
}
.sp-callout::before {
  content: '\201C'; position: absolute; top: -28px; right: 18px; z-index: 0;
  font-family: Georgia, serif; font-size: 140px; line-height: 1; font-weight: 700;
  color: var(--accent); opacity: 0.1; pointer-events: none;
}
.sp-callout__kicker, .sp-callout__text { position: relative; z-index: 1; }
.sp-callout__kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-dark); margin-bottom: 10px; }
.sp-callout__text { font-size: 19px; font-weight: 500; color: var(--ink); line-height: 1.6; }
@media (max-width: 700px) {
  .sp-split { grid-template-columns: 1fr; gap: 20px; margin: 32px 0; }
  .sp-split--reverse .sp-split__text, .sp-split--reverse .sp-split__list { order: initial; }
  .sp-callout { padding: 24px 22px; margin: 32px 0; }
  .sp-callout__text { font-size: 17px; }
}
.projekt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.projekt-tags .projekt-tag { display: inline-block; background: var(--bg-soft-2); color: var(--ink-soft); font-size: 11px; letter-spacing: 0.06em; padding: 5px 11px; border-radius: 999px; }
.projekt-bottom-nav { display: flex; gap: 14px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.projekt-bottom-nav .button-pill { flex: 1; white-space: normal; }
@media (max-width: 560px) { .projekt-bottom-nav { flex-direction: column; } }
.comparison-slider { position: relative; aspect-ratio: 16/10; margin-bottom: 12px; user-select: none; }
.comparison-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparison-slider .img-after { position: absolute; inset: 0; overflow: hidden; }
.slider-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); transform: translateX(-50%); z-index: 3; }
.slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); background: #fff; border-radius: 50%; box-shadow: var(--shadow-md); }
.comparison-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; }
.comparison-label { position: absolute; bottom: 14px; z-index: 3; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(17,17,17,0.7); color: #fff; padding: 5px 10px; border-radius: 999px; }
.label-before { left: 14px; } .label-after { right: 14px; }
.comparison-image-note { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 32px; }
@media (max-width: 640px) { .sp-meta-box, .projekt-meta-grid { grid-template-columns: 1fr; } .sp-features-grid { grid-template-columns: 1fr; } }

/* Blog */
.subpage-hero { padding-top: 140px; padding-bottom: 0; }
@media (max-width: 640px) { .subpage-hero { padding-top: 104px; } }
@media (max-width: 640px) { .subpage-hero.audit-hero { padding-top: 32px; } }
.blog-page-hero { max-width: var(--container); margin: 0 auto; padding: 140px 24px 0; }
.blog-page-hero-bg { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 21/9; background-size: cover; background-position: center; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.article-hero .subpage-shell { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.blog-post-cat { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark); background: var(--accent-soft); padding: 5px 11px; border-radius: 999px; }
.article-hero-meta { display: flex; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--ink-faint); }
.article-content { max-width: 720px; margin: 0 auto; font-size: 17px; color: var(--ink-soft); line-height: 1.75; }
.article-content h2 { font-size: clamp(22px, 3vw, 30px); color: var(--ink); margin: 40px 0 14px; }
.article-content h3 { font-size: 20px; color: var(--ink); margin: 32px 0 12px; }
.article-content p { margin-bottom: 18px; }
.article-content ul, .article-content ol { padding-left: 22px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.article-content ul { list-style: disc; } .article-content ol { list-style: decimal; }
.article-content a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-content img { border-radius: var(--radius-md); margin: 24px 0; }
.article-content blockquote { border-left: 3px solid var(--accent); padding-left: 18px; margin: 24px 0; font-style: italic; color: var(--ink); }
.archive-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.archive-chip { font-size: 13px; font-weight: 600; color: var(--ink-soft); border: 1.5px solid var(--border-strong); border-radius: 999px; padding: 8px 16px; transition: border-color .2s, color .2s, background .2s; }
.archive-chip:hover { border-color: var(--ink); color: var(--ink); }
.archive-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.blog-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-post-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.blog-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.blog-post-img { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; }
.blog-post-img .blog-post-cat { position: absolute; left: 12px; top: 12px; background: rgba(255,255,255,0.95); }
.blog-post-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-post-date { font-size: 12px; color: var(--ink-faint); }
.blog-post-title { font-size: 18px; letter-spacing: -0.02em; }
.blog-post-excerpt { font-size: 14px; color: var(--ink-soft); flex: 1; }
.blog-post-read { font-size: 13px; font-weight: 700; color: var(--ink); }
.archive-pager { display: flex; justify-content: center; gap: 12px; margin-top: 44px; }
.pager-btn.is-disabled { opacity: .4; pointer-events: none; }
.about-cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--container); margin: 0 auto; padding: 40px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.about-cta-text h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; }
.about-cta-text p { font-size: 15px; color: var(--ink-soft); max-width: 48ch; }
@media (max-width: 900px) { .blog-archive-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .blog-archive-grid { grid-template-columns: 1fr; } .about-cta-strip { padding: 28px 22px; } }

/* Legal (.legal-page classes; Viibe .legal rules above left intact) */
.legal-title { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 12px; }
.legal-lead { font-size: 16px; color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }
.legal-company-block { margin: 32px 0; padding: 22px 24px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 6px; }
.legal-company-block p { font-size: 14px; color: var(--ink-soft); }
.legal-section { margin-top: 32px; }
.legal-section h2 { font-size: 20px; margin-bottom: 10px; }
.legal-section p { font-size: 15px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.7; }
.legal-list { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-list li { font-size: 15px; color: var(--ink-soft); }
.legal-callout { padding: 18px 20px; background: var(--accent-soft); border-radius: var(--radius-md); }
.legal-callout p { color: var(--ink); margin: 0; }
.legal-callout a { color: var(--accent-dark); text-decoration: underline; }

/* Free website audit landing page */
.services-cta__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.audit-cta-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-faint); text-decoration: none; transition: color .2s var(--ease-out); }
.audit-cta-link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.audit-cta-link__arrow { display: inline-block; transition: transform .2s var(--ease-out); }
.audit-cta-link:hover .audit-cta-link__arrow { transform: translateX(3px); }
@media (max-width: 640px) {
  .services-cta__actions { align-items: stretch; width: 100%; }
  .audit-cta-link { justify-content: center; }
}

/* Hero typography matches the homepage hero (.hero__title) so the page
   title outranks the section h2s below it. */
/* The nav sits in normal flow above the hero, so the default 140px
   subpage-hero top padding stacked on top of it and pushed both columns
   far down the screen. */
.subpage-hero.audit-hero { padding-top: 48px; }
/* [data-reveal] sections are transformed, so each is its own stacking
   context and later sections paint (and catch clicks) above earlier ones.
   Lift the hero so the goal dropdown, which hangs past the hero's bottom
   edge, stays on top of the next section and its lower options clickable. */
.audit-hero { position: relative; z-index: 3; }
.audit-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.audit-hero .hero__title { font-size: clamp(36px, 4.4vw, 56px); }
.audit-hero .section-head { padding-top: 28px; }
.audit-hero .section-head { max-width: 600px; }
/* Clear the fixed nav when the final CTA jumps back up to the form. */
.audit-hero__form { scroll-margin-top: 110px; }
@media (max-width: 960px) {
  .audit-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .audit-hero .section-head { padding-top: 0; }
}
.audit-hero__lead { margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 620px; }
.audit-hero__sub { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-faint); max-width: 56ch; }
@media (max-width: 640px) {
  .audit-hero .hero__title { font-size: clamp(30px, 9vw, 40px); }
  .audit-hero__lead { font-size: 17px; }
  .audit-hero__sub { font-size: 14.5px; }
}
/* Scroll hint under the hero copy: fills the empty space left of the
   taller form and points to the details below. Desktop only - on narrow
   screens the form sits directly under the copy, so "scroll down" would
   skip right past it. */
.audit-scroll-hint { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color .2s var(--ease-out); }
.audit-scroll-hint__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  transition: background .2s var(--ease-out);
}
.audit-scroll-hint__icon svg { animation: audit-hint-drift 2.6s var(--ease-smooth) infinite; }
.audit-scroll-hint:hover { color: var(--ink); }
.audit-scroll-hint:hover .audit-scroll-hint__icon { background: var(--accent-soft-2); }
@keyframes audit-hint-drift { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (max-width: 960px) { .audit-scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .audit-scroll-hint__icon svg { animation: none; } }
.audit-hero-cta { margin-top: 36px; }
.audit-hero-cta__note { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); }

.audit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.audit-card { padding: 30px 26px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.audit-card__icon { display: block; width: 42px; height: 42px; margin-bottom: 18px; color: var(--accent-dark); }
.audit-card__icon svg { width: 100%; height: 100%; }
.audit-card h3 { font-size: 17px; margin-bottom: 8px; }
.audit-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }

.final-cta .final-cta__note { margin-top: 18px; margin-bottom: 0; font-size: 13px; color: rgba(255,255,255,0.5); }

.audit-form-wrap { max-width: 600px; margin: 0 auto; }

/* legacy decorative hooks from the old dark theme - keep disabled */
.hero-gradient, .orb-field, .scatter-scene, .media-modal, .svc-deck-nav, .scatter-hint { display: none !important; }