@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600;700&family=Cormorant+Garamond:wght@600;700&family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,500;600;700&family=JetBrains+Mono:wght@500;600&family=Roboto+Condensed:wght@400;500;600;700&family=Roboto:wght@400;500;600;700&display=swap");
:root {
  /* Flexify / Elementor theme tokens (from geekybee.net) */
  --color-bg: #f5f3eb;
  --color-bg-alt: #ffffff;
  --color-border: #e5e2d7;
  --color-title: #0a0f1a;
  --color-text: #7a7a7a;
  --color-secondary: #54595f;
  --color-text-muted: var(--color-secondary);
  --color-primary: #6ec1e4;
  --color-accent: #61ce70;
  --color-gold: #ebba3f;
  --color-menu-bg: #fafafa;
  --color-topbar: #1b213b;

  /* Aliases used across components */
  --color-honey: var(--color-gold);
  --color-honey-light: #f3cf6a;
  --color-honey-dark: #c99a1f;
  --color-ink: var(--color-title);
  --color-ink-soft: #1a2233;
  --color-slate: var(--color-text);
  --color-mist: var(--color-bg);
  --color-white: var(--color-bg-alt);
  --color-success: var(--color-accent);
  --color-orange: #f26d23;
  --color-border-strong: #d8d4c8;

  /* Typography — matches live Elementor / Flexify site */
  --font-sans: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "DM Sans", var(--font-sans);
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-georgia: Georgia, "Times New Roman", Times, serif;
  --font-hero: "Comfortaa", var(--font-sans);
  --font-eyebrow: "JetBrains Mono", ui-monospace, monospace;
  --font-list: var(--font-eyebrow);
  --font-button: "DM Sans", var(--font-sans);
  --font-heading: "Roboto Condensed", var(--font-sans);
  --font-size-body: clamp(0.9375rem, 0.875rem + 0.25vw, 1rem);
  --font-size-h3: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
  --font-size-mono-sm: clamp(0.8125rem, 0.75rem + 0.2vw, 0.875rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --max-width: 71.25rem;
  --hero-content-width: 80vw;
  --header-height: auto;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-sm: 0 0 5px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 16px rgba(10, 15, 26, 0.08);
  --shadow-lg: 0 12px 40px rgba(10, 15, 26, 0.12);

  --transition: 180ms ease;

  /* Graduated backgrounds — from geekybee.net Elementor sections */
  --gradient-night: linear-gradient(180deg, #7180bd 0%, #0c0f1e 100%);
  --gradient-green: linear-gradient(164deg, #181f3e 0%, #198524 100%);
  --gradient-green-soft: linear-gradient(180deg, #181f3d 0%, #198524 100%);
  --gradient-green-alt: linear-gradient(174deg, #181f3d 0%, #198524 100%);
  --gradient-orange: linear-gradient(164deg, #000000 0%, #f26d23 100%);
  --gradient-slate: linear-gradient(164deg, #000000 0%, #3e5988 100%);
  --gradient-cream: linear-gradient(174deg, #fde8d8 0%, #fff8f4 100%);
  --gradient-purple: linear-gradient(180deg, #181f3d 0%, #d82edd 100%);
  --gradient-footer-logo: linear-gradient(135deg, #7180bd 0%, #0c0f1e 100%);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-title);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  color: var(--color-title);
  line-height: 1.2;
  margin: 0 0 var(--space-md);
}

h1 {
  font-size: clamp(2rem, 6vw, 6.375rem);
}

h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.75rem);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-weight: 600;
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
}

ul,
ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
}

li {
  font-family: var(--font-list);
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.65;
}

li :where(p, span) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

li :where(h1, h2, h3) {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
}

button,
input,
textarea,
select {
  font: inherit;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

.section {
  padding-block: var(--space-4xl);
}

.section--muted {
  background: var(--color-mist);
}

/* Graduated band sections (matches Elementor master pages) */
.section--band {
  position: relative;
  overflow: hidden;
  border-block: none;
}

.section--band > .container {
  position: relative;
  z-index: 1;
}

.section--band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section--gradient-night::before {
  background: var(--gradient-night);
}

.section--gradient-green::before,
.section--gradient-green-soft::before {
  background: var(--gradient-green-soft);
}

.section--gradient-green-alt::before {
  background: var(--gradient-green-alt);
}

.section--gradient-orange::before {
  background: var(--gradient-orange);
}

.section--gradient-slate::before {
  background: var(--gradient-slate);
}

.section--gradient-cream::before {
  background: var(--gradient-cream);
}

.section--gradient-purple::before {
  background: var(--gradient-purple);
}

.section--band.section--gradient-night,
.section--band.section--gradient-green,
.section--band.section--gradient-green-soft,
.section--band.section--gradient-green-alt,
.section--band.section--gradient-slate,
.section--band.section--gradient-purple {
  color: #fff;
}

.section--band.section--gradient-night h2,
.section--band.section--gradient-night h3,
.section--band.section--gradient-green h2,
.section--band.section--gradient-green h3,
.section--band.section--gradient-green-soft h2,
.section--band.section--gradient-green-soft h3,
.section--band.section--gradient-green-alt h2,
.section--band.section--gradient-green-alt h3,
.section--band.section--gradient-slate h2,
.section--band.section--gradient-slate h3,
.section--band.section--gradient-purple h2,
.section--band.section--gradient-purple h3 {
  color: #fff;
}

.section--band.section--gradient-night .text-muted,
.section--band.section--gradient-green .text-muted,
.section--band.section--gradient-green-soft .text-muted,
.section--band.section--gradient-green-alt .text-muted,
.section--band.section--gradient-slate .text-muted,
.section--band.section--gradient-purple .text-muted {
  color: rgba(255, 255, 255, 0.85);
}

.section--band.section--gradient-night .section__eyebrow,
.section--band.section--gradient-green .section__eyebrow,
.section--band.section--gradient-green-soft .section__eyebrow,
.section--band.section--gradient-green-alt .section__eyebrow,
.section--band.section--gradient-slate .section__eyebrow,
.section--band.section--gradient-purple .section__eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.section--band.section--gradient-cream {
  color: var(--color-title);
}

.section--band.section--gradient-cream .text-muted {
  color: var(--color-secondary);
}

.section--band.section--page-band {
  color: #fff;
}

.section--band.section--page-band h2,
.section--band.section--page-band h3,
.section--band.section--page-band h4 {
  color: #fff;
}

.section--band.section--page-band .text-muted {
  color: rgba(255, 255, 255, 0.85);
}

.section--band.section--page-band .section__eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.landing-stats .landing-stat strong {
  display: block;
  font-size: 1.75rem;
  color: var(--color-title);
  margin-bottom: var(--space-xs);
}

.landing-stats .landing-stat span {
  font-size: 0.9375rem;
  color: var(--color-text);
}

/* Service landing pages */
.service-phase {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  opacity: 0.9;
}

body[data-page="service"] .hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.2;
  color: #fff;
}

.lifecycle-crosslinks {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

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

.lifecycle-crosslink {
  display: block;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.lifecycle-crosslink:hover {
  border-color: var(--page-accent, var(--color-accent));
  box-shadow: var(--shadow-sm);
  color: var(--color-title);
}

.lifecycle-crosslink.is-current {
  border-color: var(--page-accent, var(--color-accent));
  background: var(--page-accent-muted, rgba(97, 206, 112, 0.08));
}

.lifecycle-crosslink__label {
  font-family: var(--font-eyebrow);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-accent, var(--color-accent));
}

.lifecycle-crosslink__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  margin: var(--space-xs) 0;
  color: var(--color-title);
}

.lifecycle-crosslink__text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

.section--dark {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background: transparent;
  border-block: none;
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-night);
  z-index: 0;
}

.section--dark > .container {
  position: relative;
  z-index: 1;
}

.section--dark a {
  color: var(--color-honey-light);
}

.section__header {
  max-width: 42rem;
  margin-bottom: var(--space-2xl);
}

.section__header--center {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

.section__closing {
  max-width: 42rem;
  margin: var(--space-xl) auto 0;
  text-align: center;
}

.section--accent {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: transparent;
  border-block: none;
}

.section--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-orange);
  z-index: 0;
}

.section--accent > .container {
  position: relative;
  z-index: 1;
}

.section--accent h2,
.section--accent .text-muted {
  color: #fff;
}

.section.section--accent h2 {
  color: #fff;
  font-weight: 500;
}

.section--accent .section__eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary, #54595f);
  margin-bottom: var(--space-sm);
}

.section--dark .section__eyebrow,
.hero .section__eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.nowrap {
  white-space: nowrap;
}

.section--dark .section__eyebrow {
  color: var(--color-honey-light);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-white);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.stack > * + * {
  margin-top: var(--space-md);
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-slate);
}

.section--dark .text-muted {
  color: rgba(255, 255, 255, 0.72);
}
/* Site header — unified navy bar: phones, logo, navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-topbar);
  color: rgba(255, 255, 255, 0.88);
}

.site-header__inner {
  padding-bottom: 0;
}

.top-bar__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  min-height: 5.25rem;
  padding: 0.35rem 0 0.25rem;
}

.top-bar__item--phones {
  min-width: 0;
}

.top-bar__item--end {
  justify-self: end;
  text-align: right;
}

.top-bar__mono-line {
  display: block;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  line-height: 1.4;
}

.top-bar__mono-line strong {
  font-weight: 700;
  color: #fff;
}

.top-bar__mono-line:hover {
  color: var(--color-primary);
}

.top-bar__mono-line:hover strong {
  color: var(--color-primary);
}

.top-bar__logo {
  display: inline-flex;
  justify-self: center;
  text-decoration: none;
  line-height: 0;
}

.top-bar__logo img {
  width: min(13.75rem, 42vw);
  height: auto;
  display: block;
}

.site-logo {
  display: inline-flex;
  text-decoration: none;
}

.site-logo img {
  width: min(220px, 70vw);
  height: auto;
}

.menu-bar {
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.menu-bar__inner {
  position: relative;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list > li {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.site-nav__list > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30%;
  height: 25px;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.site-nav__link {
  display: inline-block;
  padding: 0.875rem 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition), background var(--transition);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.site-nav__link.is-active {
  color: var(--color-primary);
  background: rgba(255, 255, 255, 0.06);
}

.site-nav__item--has-submenu {
  position: relative;
}

.site-nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--color-topbar);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  z-index: 120;
}

.site-nav__submenu a {
  display: block;
  padding: 0.625rem 1rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-nav__submenu a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-primary);
}

.site-nav__item--has-submenu:hover .site-nav__submenu,
.site-nav__item--has-submenu:focus-within .site-nav__submenu {
  display: block;
}

.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-md);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.25rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-button);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: #57b4db;
  border-color: #57b4db;
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-honey);
  color: var(--color-honey-dark);
}

.btn--dark {
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}

.btn--dark:hover {
  background: var(--color-ink-soft);
  color: var(--color-white);
}

/* Cards */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.card[id] {
  scroll-margin-top: 7rem;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--flat {
  box-shadow: none;
  background: var(--color-bg-alt);
}

.card--flat:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

.card__meta {
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.card__text--small {
  font-size: 0.8125rem;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.products-page-grid {
  align-items: stretch;
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-lg);
}

/* App logo on product landing page heroes */
.product-landing-logo {
  display: block;
  width: min(18rem, 75vw);
  height: auto;
  margin: 0 auto 1.5rem;
}

.product-landing-logo--icon {
  width: min(6.5rem, 22vw);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.product-landing-logo--left {
  margin-inline: 0;
}

.card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-title);
  background: rgba(110, 193, 228, 0.15);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-orange);
  margin-bottom: var(--space-sm);
}

.section--band .card .card__title {
  color: var(--color-orange);
}

.card h2.card__title,
.card h3.card__title {
  font-size: 1.375rem;
  color: var(--color-orange);
}

.card h3.card__title {
  font-size: 1.125rem;
}

.card__text {
  color: var(--color-slate);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  margin-bottom: 0;
}

/* Hero — graduated backgrounds per page (matches Elementor) */
.hero {
  position: relative;
  padding-block: var(--space-4xl) var(--space-3xl);
  border-bottom: none;
  text-align: left;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-night);
  z-index: 0;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero > .container,
.hero__layout {
  width: min(calc(100% - 2rem), var(--hero-content-width));
  max-width: var(--hero-content-width);
}

body[data-page="home"] .hero::before {
  background: var(--gradient-night);
}

body[data-page="services"] .hero::before,
body[data-page="service"] .hero::before,
body[data-page="products"] .hero::before,
body[data-page="vr-360"] .hero::before {
  background: var(--gradient-green);
}

body[data-page="about"] .hero::before {
  background: var(--gradient-orange);
}

body[data-page="contact"] .hero::before {
  background: var(--gradient-slate);
}

.hero h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: left;
  color: #fff;
  text-shadow: none;
  width: 100%;
  max-width: 100%;
}

body[data-page="home"] .hero h2.hero__headline-sub {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.01em;
  text-shadow: none;
}

.hero .text-muted,
.hero__lead {
  color: rgba(255, 255, 255, 0.88);
}

body[data-page="service"] .hero .section__eyebrow,
body[data-page="service"] .service-phase {
  color: rgba(255, 255, 255, 0.82);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
}

.hero__lead {
  font-size: 1.125rem;
  max-width: 42rem;
  margin-inline: 0;
  margin-bottom: 0;
  text-align: left;
}

.hero__stat {
  text-align: center;
  min-width: 7rem;
}

.hero__stat strong {
  display: block;
  font-size: 1.25rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
}

.hero__stat-number {
  font-size: 2.5rem !important;
  line-height: 1.1;
  font-weight: 700;
  font-family: var(--font-hero);
}

.hero__stat span {
  font-size: 0.8125rem;
  font-family: var(--font-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.hero .btn--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.hero .btn--secondary:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Section headings outside hero */
.section h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  color: var(--color-secondary);
}

.section h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  color: var(--color-secondary);
}

.section.section--dark h2 {
  color: #fff;
}

.section--dark .card__text {
  color: rgba(255, 255, 255, 0.88);
}

/* Search */
.search-bar {
  position: relative;
  max-width: 28rem;
}

.search-bar__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-bar__input:focus {
  border-color: var(--color-honey);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  outline: none;
}

.search-bar__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-slate);
  pointer-events: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 20rem;
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.search-results.is-open {
  display: block;
}

.search-results__item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.search-results__item:last-child {
  border-bottom: none;
}

.search-results__item:hover {
  background: var(--color-mist);
}

.search-results__title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.search-results__excerpt {
  font-size: 0.8125rem;
  color: var(--color-slate);
  margin-top: 0.125rem;
}

/* Lifecycle phases */
.lifecycle-workspace {
  margin-top: var(--space-2xl);
}

.lifecycle-tabs {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  gap: 0.125rem;
  margin-bottom: 0;
}

.lifecycle-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--lifecycle-panel-border, var(--color-border));
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--lifecycle-tab-bg, rgba(0, 0, 0, 0.04));
  cursor: pointer;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.lifecycle-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-title);
}

.lifecycle-tab.is-active {
  background: var(--lifecycle-panel-bg, var(--color-bg-alt));
  border-color: var(--lifecycle-panel-border, var(--color-border));
  border-bottom: 1px solid var(--lifecycle-panel-bg, var(--color-bg-alt));
  color: var(--color-title);
  margin-bottom: -1px;
  padding-bottom: calc(0.75rem + 1px);
  position: relative;
  z-index: 1;
}

.lifecycle-panel {
  display: none;
}

.lifecycle-panel.is-active {
  display: block;
  background: var(--lifecycle-panel-bg, var(--color-bg-alt));
  border: 1px solid var(--lifecycle-panel-border, var(--color-border));
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-2xl);
}

.lifecycle-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-2xl);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.lifecycle-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.lifecycle-tag-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-button);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(110, 193, 228, 0.45);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.lifecycle-tag-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.section--gradient-green-soft .lifecycle-tab,
.section--gradient-green .lifecycle-tab,
.section--gradient-green-alt .lifecycle-tab {
  --lifecycle-tab-bg: rgba(0, 0, 0, 0.18);
  --lifecycle-panel-bg: rgba(255, 255, 255, 0.08);
  --lifecycle-panel-border: rgba(255, 255, 255, 0.18);
  background: var(--lifecycle-tab-bg);
  border-color: var(--lifecycle-panel-border);
  color: rgba(255, 255, 255, 0.78);
}

.section--gradient-green-soft .lifecycle-tab:hover,
.section--gradient-green .lifecycle-tab:hover,
.section--gradient-green-alt .lifecycle-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.section--gradient-green-soft .lifecycle-tab.is-active,
.section--gradient-green .lifecycle-tab.is-active,
.section--gradient-green-alt .lifecycle-tab.is-active {
  background: var(--lifecycle-panel-bg);
  border-color: var(--lifecycle-panel-border);
  border-bottom-color: var(--lifecycle-panel-bg);
  color: #fff;
}

.section--gradient-green-soft .lifecycle-panel.is-active,
.section--gradient-green .lifecycle-panel.is-active,
.section--gradient-green-alt .lifecycle-panel.is-active {
  background: var(--lifecycle-panel-bg);
  border-color: var(--lifecycle-panel-border);
}

.section--gradient-green-soft .lifecycle-panel__grid,
.section--gradient-green .lifecycle-panel__grid,
.section--gradient-green-alt .lifecycle-panel__grid {
  background: transparent;
  border: none;
}

@media (max-width: 720px) {
  .lifecycle-tab {
    font-size: 0.6875rem;
    padding: 0.625rem 0.25rem;
  }

  .lifecycle-tab.is-active {
    padding-bottom: calc(0.625rem + 1px);
  }

  .lifecycle-panel.is-active {
    padding: var(--space-lg);
  }
}

.section--gradient-green-soft .lifecycle-panel__grid h3,
.section--gradient-green-soft .lifecycle-panel__grid h4,
.section--gradient-green-soft .lifecycle-panel__tags,
.section--gradient-green-soft .lifecycle-panel__tags a,
.section--gradient-green-soft .lifecycle-tag-btn,
.section--gradient-green-soft .text-muted,
.section--gradient-green .lifecycle-panel__grid h3,
.section--gradient-green .lifecycle-panel__grid h4,
.section--gradient-green .lifecycle-panel__tags,
.section--gradient-green .lifecycle-panel__tags a,
.section--gradient-green .lifecycle-tag-btn,
.section--gradient-green .text-muted {
  color: #fff;
}

.section--gradient-green-soft .lifecycle-tag-btn,
.section--gradient-green .lifecycle-tag-btn {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.section--gradient-green-soft .lifecycle-panel__tags a:hover,
.section--gradient-green .lifecycle-panel__tags a:hover,
.section--gradient-green-soft .lifecycle-tag-btn:hover,
.section--gradient-green .lifecycle-tag-btn:hover {
  color: #fff;
}

.section--gradient-green-soft .card,
.section--gradient-green .card,
.section--gradient-night .card {
  background: rgba(255, 255, 255, 0.95);
}

/* Pricing features row */
.pricing-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.pricing-feature {
  text-align: center;
  padding: var(--space-lg);
}

.pricing-feature__title {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  color: var(--color-title);
}

.pricing-feature__text {
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0;
}

/* Contact steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-3xl);
}

.step-card {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.step-card__number {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primary);
  font-family: "Cormorant Garamond", Georgia, serif;
  margin-bottom: var(--space-sm);
}

.step-card__title {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}

.step-card__text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.step-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  background: rgba(97, 206, 112, 0.12);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.contact-card {
  text-align: center;
}

.contact-card__qr {
  display: block;
  margin: var(--space-md) auto 0;
  max-width: 16.6875rem;
  line-height: 0;
  text-decoration: none;
}

.contact-card__qr:hover {
  opacity: 0.92;
  text-decoration: none;
}

.contact-card__qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.contact-disclaimer {
  max-width: 42rem;
  margin-inline: auto;
}

/* Trusted industries marquee */
.section--trusted-bar {
  padding-block: 0;
}

.trusted-marquee {
  --trusted-bar-bg: #e8eaef;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-inline: calc(50% - 50vw);
  padding: 1.125rem max(1rem, calc(50vw - var(--max-width) / 2));
  background: var(--trusted-bar-bg);
  overflow: hidden;
}

.trusted-marquee__label {
  flex: 0 0 auto;
  margin: 0;
  padding-right: 0.5rem;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: var(--trusted-bar-bg);
  position: relative;
  z-index: 2;
}

.trusted-marquee__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.trusted-marquee__fade {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5rem;
  background: linear-gradient(to right, var(--trusted-bar-bg) 15%, rgba(232, 234, 239, 0));
  pointer-events: none;
  z-index: 1;
}

.trusted-marquee__track {
  display: flex;
  width: max-content;
  animation: trusted-marquee-scroll 45s linear infinite;
}

.trusted-marquee__text {
  flex: 0 0 auto;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 28px;
  line-height: 1.2;
  color: #5f6778;
  white-space: nowrap;
}

@keyframes trusted-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trusted-marquee__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }

  .trusted-marquee__text[aria-hidden="true"] {
    display: none;
  }

  .trusted-marquee__text {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .trusted-marquee {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .trusted-marquee__text {
    font-size: 1.375rem;
  }
}

/* Reviews carousel */
.reviews-carousel {
  --reviews-visible: 4;
  --reviews-gap: var(--space-lg);
}

.reviews-carousel__viewport {
  container-type: inline-size;
  overflow: hidden;
}

.reviews-carousel__track {
  display: flex;
  gap: var(--reviews-gap);
  will-change: transform;
}

.reviews-carousel .review-card {
  flex: 0 0 calc((100cqw - (var(--reviews-visible) - 1) * var(--reviews-gap)) / var(--reviews-visible));
  min-width: 0;
}

@media (max-width: 960px) {
  .reviews-carousel {
    --reviews-visible: 2;
  }
}

@media (max-width: 520px) {
  .reviews-carousel {
    --reviews-visible: 1;
  }
}

.review-card {
  margin: 0;
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.review-card__header {
  margin-bottom: 0.375rem;
}

.review-card__author {
  font-style: normal;
  font-weight: 600;
  color: var(--color-title);
  font-size: 0.9375rem;
}

.review-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

.review-card__stars {
  display: inline-flex;
  gap: 0.0625rem;
  line-height: 1;
}

.review-card__star {
  font-size: 0.875rem;
  color: var(--color-border);
}

.review-card__star--filled {
  color: #fbbc04;
}

.review-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.review-card__date::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--color-border);
}

.review-card__text {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.review-card__source {
  margin-top: var(--space-md);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text);
}

/* Sophia chat widget */
.sophia-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
}

.sophia-widget__toggle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  font-size: 1.5rem;
  transition: transform var(--transition);
}

.sophia-widget__toggle:hover {
  transform: scale(1.05);
}

.sophia-widget__panel {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  width: min(22rem, calc(100vw - 2rem));
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.sophia-widget__panel.is-open {
  display: flex;
}

.sophia-widget__header {
  padding: var(--space-md);
  background: var(--color-ink);
  color: var(--color-white);
  font-weight: 600;
}

.sophia-widget__messages {
  padding: var(--space-md);
  min-height: 12rem;
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sophia-widget__message {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  max-width: 85%;
}

.sophia-widget__message--bot {
  background: var(--color-mist);
  align-self: flex-start;
}

.sophia-widget__message--user {
  background: rgba(110, 193, 228, 0.25);
  align-self: flex-end;
}

.sophia-widget__input-row {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.sophia-widget__input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.sophia-widget__send {
  padding: 0.5rem 0.875rem;
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

/* Footer — matches WordPress Flexify layout */
.site-footer {
  background: var(--color-title);
  color: rgba(255, 255, 255, 0.88);
  padding-block: var(--space-3xl) var(--space-xl);
}

.site-footer a {
  color: var(--color-primary);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.site-footer__company {
  color: var(--color-white);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}

.site-footer__address {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.site-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.site-footer__contact li {
  margin-bottom: var(--space-xs);
}

.site-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-footer__contact-label {
  display: block;
}

/* Contact channel cards */
.contact-channels-grid {
  align-items: stretch;
}

.contact-channel-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-channel-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-lg);
  width: 100%;
}

/* Cal.com booking embed */
.contact-booking-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-xl);
  row-gap: var(--space-md);
  grid-template-rows: auto auto 1fr;
  align-items: stretch;
}

.contact-booking-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--space-md);
  min-width: 0;
}

.contact-booking-col h2 {
  margin-bottom: 0;
}

.contact-booking-col__lede {
  margin: 0;
}

.contact-booking-col .cal-embed-card,
.contact-booking-col .contact-audit-form {
  margin-top: 0;
  height: 100%;
  min-height: 28rem;
}

.contact-audit-form {
  display: flex;
  flex-direction: column;
}

.contact-audit-form__webmot {
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.contact-audit-form__webmot-logo-link {
  display: inline-block;
  margin-bottom: var(--space-md);
}

.contact-audit-form__webmot-logo {
  display: block;
  width: auto;
  max-width: 11rem;
  height: auto;
  margin-inline: auto;
}

.contact-audit-form__webmot-text {
  margin: 0 0 var(--space-md);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-secondary);
}

.cal-embed-card {
  padding: 0;
  overflow: hidden;
}

.cal-embed {
  width: 100%;
  min-height: 28rem;
  overflow: auto;
}

@media (max-width: 48rem) {
  .contact-booking-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .contact-booking-col {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .contact-booking-col + .contact-booking-col {
    margin-top: var(--space-xl);
  }

  .contact-booking-col .cal-embed-card,
  .contact-booking-col .contact-audit-form {
    height: auto;
  }
}

.site-footer__tagline {
  text-align: center;
}

.site-footer__logo {
  display: inline-block;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--gradient-footer-logo);
  line-height: 0;
  text-decoration: none;
}

.site-footer__logo:hover {
  text-decoration: none;
  opacity: 0.95;
}

.site-footer__logo img {
  display: block;
  width: min(100%, 16.5rem);
  height: auto;
}

.site-footer__heading {
  color: var(--color-white);
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.site-footer__tagline p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.site-footer__social-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-title);
  text-decoration: none;
  transform: translateY(-1px);
}

.site-footer__social-link svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.site-footer__nav {
  text-align: right;
}

.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.site-footer__nav-list li {
  margin-bottom: var(--space-xs);
}

.site-footer__nav-list a {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.site-footer__nav-list a:hover {
  color: var(--color-primary);
}

.site-footer__nav-list--legal a {
  font-size: 0.8125rem;
  text-transform: none;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer__awards {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: var(--space-lg);
}

.site-footer__award-badge {
  width: auto;
  height: clamp(5.5rem, 12vw, 8.5rem);
  max-width: min(100%, 10rem);
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 0.35rem;
}

.site-footer__ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.site-footer__ico-logo {
  width: auto;
  height: clamp(4.5rem, 10vw, 6.5rem);
  max-width: min(100%, 7.5rem);
  object-fit: contain;
  border-radius: 6px;
}

.site-footer__ico-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.admin-hub__grid {
  align-items: stretch;
}

.admin-hub__card code {
  font-size: 0.8125rem;
  word-break: break-all;
}

.admin-hub__meta {
  font-size: 0.875rem;
  margin-top: var(--space-sm);
}

.site-footer__bottom {
  grid-column: 1 / -1;
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* Cookie banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--space-md);
  z-index: 150;
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-sm);
}

.cookie-banner .btn--secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.cookie-banner .btn--secondary:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.cookie-consent-fab {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 160;
  width: 3.25rem;
  height: 3.25rem;
  border: none;
  border-radius: 50%;
  background: #1b213b;
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), background var(--transition);
}

.cookie-consent-fab:hover {
  transform: scale(1.05);
  background: #252d52;
}

.cookie-consent-fab__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.cookie-modal[hidden] {
  display: none;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

body.cookie-modal-open {
  overflow: hidden;
}

.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 26, 0.55);
}

.cookie-modal__panel {
  position: relative;
  width: min(40rem, 100%);
  max-height: min(90vh, 44rem);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cookie-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cookie-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-title);
}

.cookie-modal__close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cookie-modal__close:hover {
  background: var(--color-mist);
  color: var(--color-title);
}

.cookie-modal__body {
  padding: var(--space-md) var(--space-xl);
  overflow-y: auto;
}

.cookie-modal__intro {
  margin: 0 0 var(--space-lg);
  color: var(--color-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cookie-modal__show-more {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.cookie-category {
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}

.cookie-category__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.cookie-category__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-title);
}

.cookie-category__badge {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.cookie-category__text {
  margin: 0;
  color: var(--color-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
}

.cookie-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle__track {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #c8ccd4;
  transition: background var(--transition);
}

.cookie-toggle__track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition);
}

.cookie-toggle input:checked + .cookie-toggle__track {
  background: var(--color-primary);
}

.cookie-toggle input:checked + .cookie-toggle__track::after {
  transform: translateX(1.25rem);
}

.cookie-toggle input:focus-visible + .cookie-toggle__track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cookie-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: #fafafa;
}

.cookie-modal__btn {
  flex: 1 1 8rem;
  min-width: 0;
}

.cookie-modal__footer .btn--secondary {
  background: #fff;
}

@media (max-width: 40rem) {
  .cookie-consent-fab {
    left: 1rem;
    bottom: 1rem;
  }

  .cookie-modal__footer {
    flex-direction: column;
  }

  .cookie-modal__btn {
    width: 100%;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .top-bar__row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    text-align: center;
    gap: var(--space-sm);
    min-height: auto;
    padding: var(--space-sm) 0;
  }

  .top-bar__item--end {
    justify-self: center;
    text-align: center;
  }

  .top-bar__mono-line {
    white-space: normal;
    font-size: 0.625rem;
  }

  .top-bar__logo {
    order: -1;
  }

  .site-nav__toggle {
    display: block;
    margin-left: auto;
  }

  .menu-bar__inner {
    justify-content: flex-end;
  }

  .site-nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-topbar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: var(--space-md);
    box-shadow: var(--shadow-md);
  }

  .site-nav__list > li + li::before {
    display: none;
  }

  .site-nav__submenu {
    position: static;
    display: none;
    border: none;
    box-shadow: none;
    padding-left: var(--space-md);
  }

  .site-nav__item--has-submenu.is-open .site-nav__submenu {
    display: block;
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .site-footer .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer__nav {
    text-align: center;
  }

  .site-footer__social {
    justify-content: center;
  }

  .hero__stats {
    justify-content: center;
  }
}
/**
 * Per-page theme tweaks — same layout and components, shifted gradients and accents.
 * Apply via class on <body>, e.g. class="theme-webmot"
 *
 * Each theme overrides:
 *   --page-hero-gradient   hero background
 *   --page-band-gradient   secondary gradient sections
 *   --page-accent          links, eyebrows, highlights
 *   --page-accent-muted    soft tint for cards/tags
 */

/* ── Services (lifecycle phases) ───────────────────────────── */

.theme-create {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #198524 100%);
  --page-band-gradient: linear-gradient(174deg, #181f3d 0%, #2a9e38 85%);
  --page-accent: #61ce70;
  --page-accent-muted: rgba(97, 206, 112, 0.14);
}

.theme-run {
  --page-hero-gradient: linear-gradient(164deg, #0c0f1e 0%, #3e5988 100%);
  --page-band-gradient: linear-gradient(164deg, #181f3e 40%, #3e5988 100%);
  --page-accent: #6ec1e4;
  --page-accent-muted: rgba(110, 193, 228, 0.14);
}

.theme-grow {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #f26d23 100%);
  --page-band-gradient: linear-gradient(164deg, #1a1a1a 0%, #f26d23 90%);
  --page-accent: #f26d23;
  --page-accent-muted: rgba(242, 109, 35, 0.14);
}

.theme-automate {
  --page-hero-gradient: linear-gradient(164deg, #181f3d 0%, #d82edd 100%);
  --page-band-gradient: linear-gradient(180deg, #181f3d 0%, #9b1fa3 100%);
  --page-accent: #d82edd;
  --page-accent-muted: rgba(216, 46, 221, 0.14);
}

.theme-protect {
  --page-hero-gradient: linear-gradient(164deg, #0c0f1e 0%, #7180bd 100%);
  --page-band-gradient: linear-gradient(180deg, #181f3e 0%, #7180bd 100%);
  --page-accent: #7180bd;
  --page-accent-muted: rgba(113, 128, 189, 0.16);
}

/* ── Products (SaaS) ─────────────────────────────────────────── */

.theme-pf {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #6ec1e4 100%);
  --page-band-gradient: linear-gradient(174deg, #0c0f1e 0%, #3e5988 100%);
  --page-accent: #6ec1e4;
  --page-accent-muted: rgba(110, 193, 228, 0.14);
}

.theme-ovation {
  --page-hero-gradient: linear-gradient(164deg, #1a0a2e 0%, #d82edd 55%, #f26d23 100%);
  --page-band-gradient: linear-gradient(164deg, #181f3d 0%, #7b2cbf 100%);
  --page-accent: #d82edd;
  --page-accent-muted: rgba(216, 46, 221, 0.12);
}

.theme-velvet {
  --page-hero-gradient: linear-gradient(164deg, #0c0f1e 0%, #8b1a4a 50%, #181f3e 100%);
  --page-band-gradient: linear-gradient(164deg, #2d0a1e 0%, #5c1a3a 100%);
  --page-accent: #c94b7a;
  --page-accent-muted: rgba(201, 75, 122, 0.14);
}

.theme-hive {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #ebba3f 100%);
  --page-band-gradient: linear-gradient(174deg, #3d2e0a 0%, #c99a1f 100%);
  --page-accent: #ebba3f;
  --page-accent-muted: rgba(235, 186, 63, 0.16);
}

.theme-webmot {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #3e5988 100%);
  --page-band-gradient: linear-gradient(164deg, #0c0f1e 0%, #198524 85%);
  --page-accent: #6ec1e4;
  --page-accent-muted: rgba(110, 193, 228, 0.14);
}

.theme-propscope {
  --page-hero-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --page-band-gradient: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --page-accent: #34d399;
  --page-accent-muted: rgba(52, 211, 153, 0.12);
}

.theme-sbabe {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #7180bd 50%, #61ce70 100%);
  --page-band-gradient: linear-gradient(174deg, #181f3d 0%, #4a5a9d 100%);
  --page-accent: #7180bd;
  --page-accent-muted: rgba(113, 128, 189, 0.14);
}

.theme-newshive {
  --page-hero-gradient: linear-gradient(164deg, #181f3e 0%, #f26d23 70%, #ebba3f 100%);
  --page-band-gradient: linear-gradient(164deg, #1a1a1a 0%, #c9781f 100%);
  --page-accent: #f26d23;
  --page-accent-muted: rgba(242, 109, 35, 0.12);
}

/* ── Apply theme tokens to landing pages ─────────────────────── */

[class*="theme-"] .hero::before,
body[data-page="service"][class*="theme-"] .hero::before {
  background: var(--page-hero-gradient, var(--gradient-green));
}

[class*="theme-"] .section--page-band::before {
  background: var(--page-band-gradient, var(--gradient-green-soft));
}

[class*="theme-"] .section__eyebrow,
[class*="theme-"] .landing-phase {
  color: var(--page-accent, var(--color-accent));
}

[class*="theme-"] .text-accent {
  color: var(--page-accent, var(--color-accent));
}

[class*="theme-"] .card__tag,
[class*="theme-"] .step-card__badge,
[class*="theme-"] .landing-stat {
  background: var(--page-accent-muted, rgba(97, 206, 112, 0.14));
  color: var(--page-accent, var(--color-accent));
}

[class*="theme-"] .btn--primary {
  background: var(--page-accent, var(--color-primary));
  border-color: var(--page-accent, var(--color-primary));
}

[class*="theme-"] .site-nav__link.is-active,
[class*="theme-"] .site-nav__link[aria-current="page"] {
  border-bottom-color: var(--page-accent, var(--color-accent));
}

/* PropScope landing — visual language drawn from propscope.co.uk */

body.theme-propscope {
  --ps-bg: #0f172a;
  --ps-surface: #1e293b;
  --ps-border: #334155;
  --ps-text: #e2e8f0;
  --ps-muted: #94a3b8;
  --ps-emerald: #059669;
  --ps-emerald-hover: #047857;
  --ps-emerald-light: #34d399;
}

body.theme-propscope main {
  background: var(--ps-bg);
  color: var(--ps-text);
}

body.theme-propscope .hero::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(5, 150, 105, 0.2) 0%, transparent 72%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

body.theme-propscope .section--page-band::before {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

body.theme-propscope .section h2,
body.theme-propscope .section h3,
body.theme-propscope .hero h1 {
  color: #fff;
}

body.theme-propscope .section h2,
body.theme-propscope .section h3 {
  font-family: Inter, var(--font-sans);
}

body.theme-propscope .text-muted,
body.theme-propscope .hero .text-muted {
  color: var(--ps-muted);
}

body.theme-propscope .section__eyebrow,
body.theme-propscope .hero .section__eyebrow {
  color: var(--ps-emerald-light);
  font-family: Inter, var(--font-sans);
  letter-spacing: 0.12em;
}

body.theme-propscope .hero__lead,
body.theme-propscope .hero .text-muted {
  color: #cbd5e1;
}

body.theme-propscope .card,
body.theme-propscope .landing-stat {
  background: var(--ps-surface);
  border-color: var(--ps-border);
  box-shadow: none;
}

body.theme-propscope .card__title {
  color: var(--ps-emerald-light);
}

body.theme-propscope .card__text {
  color: var(--ps-muted);
}

body.theme-propscope .landing-stat strong {
  color: #fff;
  font-family: Inter, var(--font-sans);
}

body.theme-propscope .landing-stat span {
  color: var(--ps-muted);
}

body.theme-propscope .btn--primary {
  background: var(--ps-emerald);
  border-color: var(--ps-emerald);
  border-radius: 0.75rem;
  font-family: Inter, var(--font-button);
}

body.theme-propscope .btn--primary:hover {
  background: var(--ps-emerald-hover);
  border-color: var(--ps-emerald-hover);
  color: #fff;
}

body.theme-propscope .btn--secondary {
  color: #fff;
  background: var(--ps-surface);
  border-color: var(--ps-border);
  border-radius: 0.75rem;
  font-family: Inter, var(--font-button);
}

body.theme-propscope .hero .btn--secondary:hover {
  color: #fff;
  border-color: #cbd5e1;
  background: #334155;
}

.propscope-hero-note {
  margin: var(--space-md) 0 0;
  font-size: 0.875rem;
  color: var(--ps-muted);
}

.propscope-back-link {
  color: var(--ps-emerald-light);
  text-decoration: none;
}

.propscope-back-link:hover {
  color: #6ee7b7;
  text-decoration: underline;
}

/* WebMOT product landing — sales-focused layout */

.webmot-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(165deg, #f8fafc 0%, #eef4fb 45%, #fff8f0 100%);
}

.webmot-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(245, 197, 24, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 5% 80%, rgba(24, 31, 62, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.webmot-hero .container {
  position: relative;
  z-index: 1;
}

.webmot-hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .webmot-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.webmot-hero__logo {
  width: min(220px, 70vw);
  height: auto;
  margin-bottom: 1rem;
}

.webmot-hero__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: rgba(24, 31, 62, 0.08);
  border-radius: 4px;
}

.webmot-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.12;
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.webmot-hero__lead {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 38rem;
  margin-bottom: 1.5rem;
}

.webmot-hero__price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 2px solid var(--color-honey);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(245, 197, 24, 0.25);
}

.webmot-hero__price-tag strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-navy);
}

.webmot-hero__price-tag span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.webmot-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.webmot-hero__trust {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.webmot-hero__trust strong {
  color: var(--color-navy);
}

/* Price card in hero */
.webmot-price-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 12px 40px rgba(24, 31, 62, 0.12);
  border: 1px solid rgba(24, 31, 62, 0.08);
}

.webmot-price-card__badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-terracotta);
  border-radius: 4px;
}

.webmot-price-card h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.webmot-price-card__sub {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.webmot-price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.webmot-price-card li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}

.webmot-price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-terracotta);
  font-weight: 700;
}

.webmot-price-card .btn {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
}

/* Stats strip */
.webmot-stats {
  background: var(--color-navy);
  color: #fff;
  padding: clamp(2rem, 4vw, 2.75rem) 0;
}

.webmot-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
  text-align: center;
}

@media (min-width: 640px) {
  .webmot-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.webmot-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--color-honey);
  margin-bottom: 0.25rem;
}

.webmot-stat__label {
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* Pain / value band */
.webmot-pain {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: #fff;
}

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

.webmot-pain h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.webmot-pain p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.webmot-pain strong {
  color: var(--color-navy);
}

/* Steps */
.webmot-steps {
  padding: clamp(3rem, 6vw, 4rem) 0;
  background: var(--color-cream);
}

.webmot-steps h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-navy);
  margin-bottom: 2rem;
}

.webmot-steps__grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

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

.webmot-step {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(24, 31, 62, 0.08);
  text-align: center;
}

.webmot-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-honey);
  border-radius: 50%;
}

.webmot-step h3 {
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.webmot-step p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

.webmot-steps__cta {
  text-align: center;
}

/* Six areas */
.webmot-areas {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: #fff;
}

.webmot-areas h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.webmot-areas__intro {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 2.5rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.webmot-areas__grid {
  display: grid;
  gap: 1.25rem;
}

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

@media (min-width: 1024px) {
  .webmot-areas__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.webmot-area {
  padding: 1.35rem;
  background: var(--color-cream);
  border-radius: 10px;
  border-left: 4px solid var(--color-terracotta);
}

.webmot-area h3 {
  font-size: 1rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.webmot-area p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* Personas */
.webmot-personas {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: linear-gradient(180deg, #181f3e 0%, #0f1428 100%);
  color: #fff;
}

.webmot-personas h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2rem;
}

.webmot-personas__grid {
  display: grid;
  gap: 1.5rem;
}

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

.webmot-persona {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.webmot-persona h3 {
  font-size: 1.05rem;
  color: var(--color-honey);
  margin-bottom: 0.75rem;
}

.webmot-persona p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.9;
  margin: 0;
}

/* Pricing section */
.webmot-pricing {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--color-cream);
}

.webmot-pricing h2 {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.webmot-pricing__sub {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.webmot-pricing__grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .webmot-pricing__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.webmot-plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid rgba(24, 31, 62, 0.1);
  box-shadow: 0 4px 20px rgba(24, 31, 62, 0.06);
}

.webmot-plan--featured {
  border: 2px solid var(--color-honey);
  box-shadow: 0 12px 40px rgba(245, 197, 24, 0.2);
  position: relative;
}

.webmot-plan--featured::before {
  content: "Most popular";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: var(--color-honey);
  border-radius: 4px;
}

.webmot-plan h3 {
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.webmot-plan__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.webmot-plan__price-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.webmot-plan__save {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-terracotta);
  border-radius: 4px;
}

.webmot-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}

.webmot-plan li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.webmot-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-terracotta);
  font-weight: 700;
}

.webmot-plan .btn {
  width: 100%;
  justify-content: center;
}

/* Final CTA */
.webmot-final-cta {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--color-navy);
  color: #fff;
  text-align: center;
}

.webmot-final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 0.75rem;
}

.webmot-final-cta__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--color-honey);
  margin-bottom: 1rem;
}

.webmot-final-cta p {
  max-width: 28rem;
  margin: 0 auto 1.5rem;
  opacity: 0.9;
  line-height: 1.6;
}

.webmot-final-cta .btn--honey {
  font-size: 1.05rem;
  padding: 0.9rem 2rem;
}

/* Velvet Rope landing — visual language from velvet-rope.geekybee.net */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

body.theme-velvet {
  --vr-bg: #0e0b0f;
  --vr-surface: #1a1418;
  --vr-surface-2: #241c22;
  --vr-text: #f1ece3;
  --vr-muted: #a89e91;
  --vr-rose: #c94b7a;
  --vr-rose-deep: #8b1a4a;
  --vr-border: rgba(241, 236, 227, 0.1);
  --vr-red: #e85d5d;
  --vr-green: #4ade80;
}

body.theme-velvet main {
  font-family: "Hanken Grotesk", var(--font-sans);
  background: var(--vr-bg);
  color: var(--vr-text);
}

body.theme-velvet .hero::before,
body.theme-velvet .section--page-band::before {
  display: none;
}

/* Hero */
.vr-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgba(201, 75, 122, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(139, 26, 74, 0.12) 0%, transparent 50%),
    var(--vr-bg);
}

.vr-hero .container {
  max-width: 52rem;
  text-align: center;
}

.vr-hero__eyebrow {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vr-muted);
}

.vr-hero h1 {
  font-family: Fraunces, var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.75rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--vr-text);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 1.25rem;
}

.vr-hero h1 em {
  font-style: italic;
  color: var(--vr-rose);
}

.vr-hero__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: var(--vr-muted);
  max-width: 40rem;
  margin-bottom: 1.75rem;
}

.vr-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.vr-hero__trust {
  font-size: 0.85rem;
  color: var(--vr-muted);
}

/* Buttons */
.vr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  font-family: "Hanken Grotesk", var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vr-btn--rose {
  background: var(--vr-rose);
  color: #fff;
  border-color: var(--vr-rose);
}

.vr-btn--rose:hover {
  background: #d65a88;
  color: #fff;
}

.vr-btn--ghost {
  background: transparent;
  color: var(--vr-text);
  border-color: var(--vr-border);
}

.vr-btn--ghost:hover {
  background: rgba(241, 236, 227, 0.06);
  color: var(--vr-text);
}

/* Demo comment card */
.vr-demo {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--vr-surface);
  border-top: 1px solid var(--vr-border);
  border-bottom: 1px solid var(--vr-border);
}

.vr-demo__card {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem;
  background: var(--vr-surface-2);
  border: 1px solid var(--vr-border);
  border-radius: 10px;
  border-left: 3px solid var(--vr-red);
}

.vr-demo__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vr-red);
}

.vr-demo__user {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--vr-muted);
  margin-bottom: 0.5rem;
}

.vr-demo__comment {
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(241, 236, 227, 0.5);
  margin-bottom: 0.75rem;
}

.vr-demo__verdict {
  font-size: 0.85rem;
  color: var(--vr-muted);
  margin-bottom: 0.5rem;
}

.vr-demo__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vr-demo__tag {
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vr-red);
  background: rgba(232, 93, 93, 0.12);
  border-radius: 4px;
}

.vr-demo__footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--vr-muted);
  font-style: italic;
}

/* Stats */
.vr-stats {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--vr-bg);
}

.vr-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .vr-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vr-stat__value {
  display: block;
  font-family: Fraunces, var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--vr-rose);
  margin-bottom: 0.25rem;
}

.vr-stat__label {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--vr-muted);
}

/* Sections */
.vr-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.vr-section--band {
  background: var(--vr-surface);
  border-top: 1px solid var(--vr-border);
  border-bottom: 1px solid var(--vr-border);
}

.vr-section__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.vr-section__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-rose);
}

.vr-section__header h2 {
  font-family: Fraunces, var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: var(--vr-text);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.vr-section__header p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--vr-muted);
  margin: 0;
}

/* Pricing highlight */
.vr-pricing-highlight {
  display: grid;
  gap: 2rem;
  align-items: center;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem;
  background: var(--vr-surface-2);
  border: 1px solid var(--vr-border);
  border-radius: 12px;
}

@media (min-width: 768px) {
  .vr-pricing-highlight {
    grid-template-columns: 1fr auto;
  }
}

.vr-pricing-highlight h3 {
  font-family: Fraunces, var(--font-display);
  font-size: 1.35rem;
  color: var(--vr-text);
  margin-bottom: 0.75rem;
}

.vr-pricing-highlight ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vr-pricing-highlight li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--vr-muted);
}

.vr-pricing-highlight li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--vr-rose);
  font-weight: 700;
}

.vr-pricing-highlight__price {
  text-align: center;
}

.vr-pricing-highlight__price strong {
  display: block;
  font-family: Fraunces, var(--font-display);
  font-size: 2.5rem;
  color: var(--vr-text);
  line-height: 1;
}

.vr-pricing-highlight__price span {
  font-size: 0.85rem;
  color: var(--vr-muted);
}

.vr-pricing-highlight .vr-btn {
  margin-top: 1rem;
  width: 100%;
}

/* Features */
.vr-features {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .vr-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.vr-feature {
  padding: 1.5rem;
  background: var(--vr-surface);
  border: 1px solid var(--vr-border);
  border-radius: 10px;
}

.vr-feature h3 {
  font-family: Fraunces, var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vr-text);
  margin-bottom: 0.5rem;
}

.vr-feature p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--vr-muted);
  margin: 0;
}

/* Steps */
.vr-steps {
  display: grid;
  gap: 1.5rem;
}

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

.vr-step {
  padding: 1.5rem 0;
  border-top: 2px solid var(--vr-rose);
}

.vr-step__num {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vr-rose);
  margin-bottom: 0.75rem;
}

.vr-step h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--vr-text);
  margin-bottom: 0.5rem;
}

.vr-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--vr-muted);
  margin: 0;
}

/* Final CTA */
.vr-final-cta {
  padding: clamp(3.5rem, 7vw, 5rem) 0;
  text-align: center;
  background:
    linear-gradient(180deg, var(--vr-bg) 0%, #1a0a14 50%, var(--vr-bg) 100%);
  border-top: 1px solid var(--vr-border);
}

.vr-final-cta h2 {
  font-family: Fraunces, var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--vr-text);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.vr-final-cta p {
  font-size: 1.05rem;
  color: var(--vr-muted);
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.vr-final-cta__note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--vr-muted);
}

.vr-back-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--vr-muted);
}

.vr-back-link:hover {
  color: var(--vr-rose);
}

/* HiveCells landing — visual language from hivecells.geekybee.net */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

body.theme-hive {
  --hc-gold: #ebba3f;
  --hc-gold-dark: #c99a1f;
  --hc-gold-light: #f5d06a;
  --hc-navy: #181f3e;
  --hc-navy-deep: #0c0f1e;
  --hc-brown: #3d2e0a;
  --hc-bg: #faf9f6;
  --hc-text: #1a1a1a;
  --hc-muted: #6b7280;
  --hc-border: #e8e4dc;
  --hc-surface: #ffffff;
}

body.theme-hive main {
  font-family: "DM Sans", var(--font-sans);
  background: var(--hc-bg);
  color: var(--hc-text);
}

body.theme-hive .hero::before,
body.theme-hive .section--page-band::before {
  display: none;
}

/* Hero */
.hc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(235, 186, 63, 0.2) 0%, transparent 55%),
    linear-gradient(180deg, var(--hc-navy-deep) 0%, var(--hc-navy) 45%, #2a2540 100%);
  color: #fff;
}

.hc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(235, 186, 63, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(235, 186, 63, 0.06) 0%, transparent 35%);
  pointer-events: none;
}

.hc-hero .container {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.hc-hero__logo {
  width: min(320px, 85vw);
  height: auto;
  margin: 0 auto 2rem;
}

.hc-hero h1 {
  font-family: "DM Sans", var(--font-sans);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, var(--hc-gold-light) 50%, var(--hc-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.hc-hero__tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}

.hc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.hc-hero__note {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

.hc-hero__note a {
  color: var(--hc-gold-light);
  text-decoration: underline;
}

/* Buttons */
.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  font-family: "DM Sans", var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.hc-btn--gold {
  background: var(--hc-gold);
  color: var(--hc-brown);
  border-color: var(--hc-gold);
}

.hc-btn--gold:hover {
  background: var(--hc-gold-light);
  color: var(--hc-brown);
  transform: translateY(-1px);
}

.hc-btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.hc-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hc-btn--navy {
  background: var(--hc-navy);
  color: #fff;
  border-color: var(--hc-navy);
}

.hc-btn--navy:hover {
  background: var(--hc-navy-deep);
  color: #fff;
}

.hc-btn--outline {
  background: transparent;
  color: var(--hc-navy);
  border-color: var(--hc-border);
}

.hc-btn--outline:hover {
  background: var(--hc-surface);
  border-color: var(--hc-gold);
  color: var(--hc-navy);
}

/* Gravity zones */
.hc-zones {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--hc-surface);
  border-bottom: 1px solid var(--hc-border);
}

.hc-zones__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hc-zones__header h2 {
  font-family: "DM Sans", var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--hc-navy);
  text-transform: none;
  text-shadow: none;
}

.hc-zones__grid {
  display: grid;
  gap: 1.25rem;
}

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

.hc-zone {
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--hc-bg);
  border: 1px solid var(--hc-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-zone:hover {
  border-color: var(--hc-gold);
  box-shadow: 0 8px 24px rgba(235, 186, 63, 0.12);
}

.hc-zone__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-gold-dark);
  margin-bottom: 0.5rem;
}

.hc-zone h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hc-navy);
  margin-bottom: 0.35rem;
}

.hc-zone p {
  font-size: 0.9rem;
  color: var(--hc-muted);
  margin: 0;
}

/* Journey */
.hc-journey {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--hc-bg);
}

.hc-journey__header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.hc-journey__header h2 {
  font-family: "DM Sans", var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--hc-navy);
  text-transform: none;
  text-shadow: none;
}

.hc-journey__steps {
  display: grid;
  gap: 1.5rem;
  max-width: 52rem;
  margin: 0 auto;
}

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

.hc-step {
  text-align: center;
  padding: 1.5rem 1rem;
}

.hc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--hc-brown);
  background: var(--hc-gold);
  border-radius: 50%;
}

.hc-step h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hc-navy);
  margin-bottom: 0.5rem;
}

.hc-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--hc-muted);
  margin: 0;
}

/* Features band */
.hc-features {
  padding: clamp(3rem, 6vw, 4rem) 0;
  background: var(--hc-navy);
  color: #fff;
}

.hc-features__grid {
  display: grid;
  gap: 1.25rem;
}

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

.hc-feature {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(235, 186, 63, 0.2);
  border-radius: 10px;
}

.hc-feature h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hc-gold);
  margin-bottom: 0.5rem;
}

.hc-feature p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* Final CTA */
.hc-final-cta {
  padding: clamp(3.5rem, 7vw, 5rem) 0;
  text-align: center;
  background:
    linear-gradient(135deg, var(--hc-brown) 0%, var(--hc-navy) 50%, var(--hc-navy-deep) 100%);
  color: #fff;
}

.hc-final-cta h2 {
  font-family: "DM Sans", var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.hc-final-cta p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.5rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.hc-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hc-back-link {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.hc-back-link:hover {
  color: var(--hc-gold-light);
}

/* SBABE landing — visual language from sbabe.geekybee.net */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap");

body.theme-sbabe {
  --sb-navy: #070b18;
  --sb-navy-mid: #0d1428;
  --sb-navy-light: #1a1a2e;
  --sb-text: #171717;
  --sb-muted: #8a9ab8;
  --sb-light: #eef1f8;
  --sb-blue: #4db8ff;
  --sb-purple: #b57bff;
  --sb-gold: #f5c617;
  --sb-green: #61ce70;
  --sb-border: #dce4f5;
  --sb-surface: #f8f9fc;
}

body.theme-sbabe main {
  font-family: Inter, var(--font-sans);
  background: #fff;
  color: var(--sb-text);
}

body.theme-sbabe .hero::before,
body.theme-sbabe .section--page-band::before {
  display: none;
}

/* Hero */
.sb-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    linear-gradient(180deg, rgba(7, 11, 24, 0.92) 0%, rgba(13, 20, 40, 0.88) 55%, rgba(7, 11, 24, 0.95) 100%),
    linear-gradient(135deg, #181f3e 0%, #4a5a9d 50%, #2d4a3a 100%);
  color: var(--sb-light);
  text-align: center;
}

.sb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(181, 123, 255, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 15% 80%, rgba(97, 206, 112, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.sb-hero .container {
  position: relative;
  z-index: 1;
  max-width: 52rem;
}

.sb-hero__logo {
  width: min(160px, 40vw);
  height: auto;
  margin: 0 auto 1.5rem;
  border-radius: 12px;
}

.sb-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--sb-light);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 1.25rem;
}

.sb-hero h1 em {
  font-style: italic;
  color: var(--sb-gold);
}

.sb-hero__lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.65;
  color: #b8c4dc;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}

.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  font-family: Inter, var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sb-btn--gold {
  background: linear-gradient(135deg, #f5c617 0%, #e8a020 100%);
  color: #1a1200;
  border-color: var(--sb-gold);
  box-shadow: 0 4px 20px rgba(245, 198, 23, 0.35);
}

.sb-btn--gold:hover {
  background: linear-gradient(135deg, #ffd84d 0%, #f5c617 100%);
  color: #1a1200;
  transform: translateY(-1px);
}

.sb-btn--outline-light {
  background: transparent;
  color: var(--sb-light);
  border-color: rgba(238, 241, 248, 0.4);
}

.sb-btn--outline-light:hover {
  background: rgba(238, 241, 248, 0.1);
  color: #fff;
}

.sb-btn--navy {
  background: var(--sb-navy-mid);
  color: var(--sb-light);
  border-color: var(--sb-navy-mid);
}

.sb-btn--navy:hover {
  background: var(--sb-navy-light);
  color: #fff;
}

.sb-btn--outline {
  background: transparent;
  color: var(--sb-navy);
  border-color: var(--sb-border);
}

.sb-btn--outline:hover {
  background: var(--sb-surface);
  color: var(--sb-navy);
}

/* Pillars */
.sb-pillars {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: #fff;
}

.sb-pillars__grid {
  display: grid;
  gap: 1.25rem;
}

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

@media (min-width: 1024px) {
  .sb-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sb-pillar {
  padding: 1.5rem;
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.sb-pillar:hover {
  border-color: rgba(113, 128, 189, 0.4);
  box-shadow: 0 8px 24px rgba(24, 31, 62, 0.08);
}

.sb-pillar h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sb-navy);
  margin-bottom: 0.5rem;
}

.sb-pillar p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--sb-muted);
  margin: 0;
}

/* Stats */
.sb-stats {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--sb-navy-mid);
  color: var(--sb-light);
}

.sb-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
}

@media (max-width: 640px) {
  .sb-stats__grid {
    grid-template-columns: 1fr;
  }
}

.sb-stat__icon {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.sb-stat__value {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--sb-gold);
  margin-bottom: 0.25rem;
}

.sb-stat__label {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9aabc8;
}

/* Trust strip */
.sb-trust {
  padding: 1.25rem 0;
  background: #fff;
  border-bottom: 1px solid var(--sb-border);
}

.sb-trust__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sb-navy);
}

.sb-trust__inner span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Section shared */
.sb-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.sb-section--band {
  background: var(--sb-surface);
  border-top: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
}

.sb-section--dark {
  background: var(--sb-navy);
  color: var(--sb-light);
}

.sb-section__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.sb-section__header h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 600;
  color: var(--sb-navy);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.sb-section--dark .sb-section__header h2 {
  color: var(--sb-light);
}

.sb-section__header p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--sb-muted);
  margin: 0;
}

.sb-section--dark .sb-section__header p {
  color: #9aabc8;
}

.sb-section__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-purple);
}

/* Pricing */
.sb-pricing {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

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

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

.sb-plan {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
}

.sb-plan--gold {
  border-color: var(--sb-gold);
  box-shadow: 0 8px 30px rgba(245, 198, 23, 0.15);
}

.sb-plan__tier {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-purple);
  margin-bottom: 0.35rem;
}

.sb-plan h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sb-navy);
  margin-bottom: 0.35rem;
}

.sb-plan__subtitle {
  font-size: 0.85rem;
  color: var(--sb-muted);
  margin-bottom: 0.75rem;
}

.sb-plan__price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sb-navy);
  margin-bottom: 1rem;
}

.sb-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  flex: 1;
}

.sb-plan li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--sb-muted);
}

.sb-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sb-green);
  font-weight: 700;
}

.sb-plan .sb-btn {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.7rem 1rem;
}

/* Tools grid */
.sb-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 48rem;
  margin: 0 auto;
}

.sb-tool-tag {
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--sb-navy);
  background: rgba(142, 180, 200, 0.2);
  border: 1px solid var(--sb-border);
  border-radius: 999px;
}

.sb-tool-tag--premium {
  background: rgba(181, 123, 255, 0.12);
  border-color: rgba(181, 123, 255, 0.3);
  color: #7c3aed;
}

/* Dual CTA cards */
.sb-dual-cta {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .sb-dual-cta {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sb-cta-card {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  text-align: center;
}

.sb-cta-card--dark {
  background: var(--sb-navy-mid);
  border-color: rgba(238, 241, 248, 0.1);
  color: var(--sb-light);
}

.sb-cta-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.sb-cta-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sb-muted);
  margin-bottom: 1.25rem;
}

.sb-cta-card--dark p {
  color: #9aabc8;
}

/* Benefits row */
.sb-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--sb-navy);
}

/* Final CTA */
.sb-final-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(135deg, #181f3e 0%, #4a5a9d 50%, #3d6b4a 100%);
  color: var(--sb-light);
  text-align: center;
}

.sb-final-cta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--sb-light);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.5rem;
}

.sb-final-cta__tagline {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--sb-gold);
  margin-bottom: 1.5rem;
}

.sb-final-cta__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
  color: #9aabc8;
}

.sb-back-link {
  font-size: 0.9rem;
  color: rgba(238, 241, 248, 0.8);
}

.sb-back-link:hover {
  color: #fff;
}

/* Ovation landing — visual language from ovation.geekybee.net */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap");

body.theme-ovation {
  --ov-bg: #f7f6f2;
  --ov-dark: #0b0d12;
  --ov-muted: #5c6370;
  --ov-purple: #d82edd;
  --ov-purple-deep: #7b2cbf;
  --ov-orange: #f26d23;
  --ov-gold: #d4af37;
  --ov-border: #e4e0d8;
  --ov-surface: #ffffff;
}

body.theme-ovation main {
  font-family: Inter, var(--font-sans);
  background: var(--ov-bg);
  color: var(--ov-dark);
}

body.theme-ovation .hero::before,
body.theme-ovation .section--page-band::before {
  display: none;
}

/* Persona heroes */
.ov-persona {
  padding: clamp(3rem, 7vw, 5rem) 0;
}

.ov-persona--dark {
  background: linear-gradient(135deg, #1a0a2e 0%, #3d1260 45%, #1a0a2e 100%);
  color: #f7f6f2;
}

.ov-persona--light {
  background: var(--ov-bg);
  color: var(--ov-dark);
  border-top: 1px solid var(--ov-border);
  border-bottom: 1px solid var(--ov-border);
}

.ov-persona--accent {
  background: linear-gradient(135deg, #2d0f4a 0%, #5a189a 50%, #7b2cbf 100%);
  color: #f7f6f2;
}

.ov-persona .container {
  max-width: 42rem;
}

.ov-persona__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ov-gold);
}

.ov-persona--light .ov-persona__eyebrow {
  color: var(--ov-purple-deep);
}

.ov-persona h1,
.ov-persona h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  line-height: 1.12;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 1rem;
}

.ov-persona--dark h1,
.ov-persona--dark h2,
.ov-persona--accent h2 {
  color: #f7f6f2;
}

.ov-persona--light h2 {
  color: var(--ov-dark);
}

.ov-persona__lead {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.ov-persona--light .ov-persona__lead {
  color: var(--ov-muted);
  opacity: 1;
}

.ov-persona__logo {
  width: min(200px, 55vw);
  height: auto;
  margin-bottom: 1.5rem;
}

/* Buttons */
.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: Inter, var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ov-btn--dark {
  background: var(--ov-dark);
  color: var(--ov-bg);
  border-color: var(--ov-dark);
}

.ov-btn--dark:hover {
  background: #1a1d26;
  color: var(--ov-bg);
}

.ov-btn--light {
  background: transparent;
  color: #f7f6f2;
  border-color: #f7f6f2;
}

.ov-btn--light:hover {
  background: rgba(247, 246, 242, 0.1);
  color: #f7f6f2;
}

.ov-btn--outline {
  background: transparent;
  color: var(--ov-dark);
  border-color: var(--ov-gold);
}

.ov-btn--outline:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--ov-dark);
}

.ov-btn--inverse {
  background: var(--ov-bg);
  color: var(--ov-dark);
  border-color: var(--ov-bg);
}

.ov-btn--inverse:hover {
  background: #fff;
  color: var(--ov-dark);
}

/* Quote */
.ov-quote {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
  background: var(--ov-dark);
  color: #f7f6f2;
}

.ov-quote blockquote {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  max-width: 32rem;
  margin-inline: auto;
}

.ov-quote blockquote::before {
  content: "\201C";
  color: var(--ov-purple);
}

/* Sections */
.ov-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.ov-section--band {
  background: var(--ov-surface);
  border-top: 1px solid var(--ov-border);
  border-bottom: 1px solid var(--ov-border);
}

.ov-section__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.ov-section__header h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: var(--ov-dark);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.ov-section__header p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ov-muted);
  margin: 0;
}

/* Modules */
.ov-modules {
  display: grid;
  gap: 1.25rem;
}

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

@media (min-width: 1024px) {
  .ov-modules {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ov-module {
  padding: 1.5rem;
  background: var(--ov-bg);
  border: 1px solid var(--ov-border);
  border-radius: 8px;
}

.ov-module__num {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ov-purple);
  margin-bottom: 0.5rem;
}

.ov-module h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ov-dark);
  margin-bottom: 0.5rem;
}

.ov-module p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ov-muted);
  margin: 0;
}

/* Steps */
.ov-steps {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ov-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.ov-step {
  padding: 1.25rem 0;
  border-top: 2px solid var(--ov-purple);
}

.ov-step__num {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--ov-purple);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.ov-step h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ov-dark);
  margin-bottom: 0.5rem;
}

.ov-step p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ov-muted);
  margin: 0;
}

/* Pricing */
.ov-pricing {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 768px) {
  .ov-pricing {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .ov-pricing {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ov-plan {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--ov-bg);
  border: 1px solid var(--ov-border);
  border-radius: 8px;
}

.ov-plan--featured {
  background: var(--ov-dark);
  color: #f7f6f2;
  border-color: var(--ov-dark);
  position: relative;
}

.ov-plan--featured::before {
  content: "Most popular";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2rem 0.65rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ov-gold);
  color: var(--ov-dark);
  border-radius: 4px;
}

.ov-plan__tier {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ov-purple-deep);
  margin-bottom: 0.35rem;
}

.ov-plan--featured .ov-plan__tier {
  color: var(--ov-gold);
}

.ov-plan h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ov-plan--featured h3 {
  color: #f7f6f2;
}

.ov-plan__price {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.ov-plan--featured .ov-plan__price {
  color: #f7f6f2;
}

.ov-plan__note {
  font-size: 0.85rem;
  color: var(--ov-muted);
  margin-bottom: 1.25rem;
}

.ov-plan--featured .ov-plan__note {
  color: rgba(247, 246, 242, 0.75);
}

.ov-plan__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ov-muted);
  margin-bottom: 1.25rem;
  flex: 1;
}

.ov-plan--featured .ov-plan__desc {
  color: rgba(247, 246, 242, 0.85);
}

.ov-plan .ov-btn {
  width: 100%;
}

.ov-pricing-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--ov-muted);
}

/* Final CTA */
.ov-final-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(135deg, #1a0a2e 0%, #7b2cbf 60%, #d82edd 100%);
  color: #f7f6f2;
  text-align: center;
}

.ov-final-cta h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #f7f6f2;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 1.25rem;
}

.ov-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.ov-final-cta__sub {
  font-size: 0.95rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.ov-back-link {
  font-size: 0.9rem;
  color: rgba(247, 246, 242, 0.85);
}

.ov-back-link:hover {
  color: #fff;
}

/* PriorityFlow landing — visual language from priorityflow.geekybee.net */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body.theme-pf {
  --pf-teal: #0d9488;
  --pf-teal-dark: #0f766e;
  --pf-teal-light: #14b8a6;
  --pf-bg: #ffffff;
  --pf-surface: #f9fafb;
  --pf-border: #e5e7eb;
  --pf-text: #111827;
  --pf-muted: #6b7280;
  --pf-heading: #1f2937;
}

body.theme-pf main {
  font-family: Inter, var(--font-sans);
  background: var(--pf-bg);
  color: var(--pf-text);
}

body.theme-pf .hero::before,
body.theme-pf .section--page-band::before {
  display: none;
}

/* Hero */
.pf-hero {
  padding: clamp(3rem, 8vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  background: var(--pf-bg);
}

.pf-hero .container {
  max-width: 48rem;
}

.pf-hero__badge {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pf-teal-dark);
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.25);
  border-radius: 999px;
}

.pf-hero__logo {
  width: min(280px, 80vw);
  height: auto;
  margin: 0 auto 1.5rem;
}

.pf-hero h1 {
  font-family: Inter, var(--font-sans);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pf-text);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 1.25rem;
}

.pf-hero__lead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--pf-muted);
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}

.pf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: Inter, var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.pf-btn--primary {
  background: var(--pf-teal);
  color: #fff;
  border-color: var(--pf-teal);
}

.pf-btn--primary:hover {
  background: var(--pf-teal-dark);
  border-color: var(--pf-teal-dark);
  color: #fff;
}

.pf-btn--secondary {
  background: #fff;
  color: var(--pf-heading);
  border-color: var(--pf-border);
}

.pf-btn--secondary:hover {
  background: var(--pf-surface);
  color: var(--pf-heading);
}

.pf-btn--inverse {
  background: #fff;
  color: var(--pf-teal-dark);
  border-color: #fff;
}

.pf-btn--inverse:hover {
  background: #f0fdfa;
  color: var(--pf-teal-dark);
}

.pf-btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.pf-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pf-hero__trust {
  font-size: 0.85rem;
  color: var(--pf-muted);
}

/* Section shared */
.pf-section {
  padding: clamp(3rem, 6vw, 4rem) 0;
}

.pf-section--band {
  background: var(--pf-surface);
  border-top: 1px solid var(--pf-border);
  border-bottom: 1px solid var(--pf-border);
}

.pf-section__header {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto 2.5rem;
}

.pf-section__header h2 {
  font-family: Inter, var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--pf-text);
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.pf-section__header p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--pf-muted);
  margin: 0;
}

/* Features grid */
.pf-features {
  display: grid;
  gap: 1.25rem;
}

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

@media (min-width: 1024px) {
  .pf-features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pf-feature {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
  transition: box-shadow 0.15s ease;
}

.pf-feature:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.pf-feature__icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.pf-feature h3 {
  font-family: Inter, var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--pf-text);
  margin-bottom: 0.5rem;
}

.pf-feature p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--pf-muted);
  margin: 0;
}

/* Pricing */
.pf-pricing {
  display: grid;
  gap: 1.25rem;
  align-items: stretch;
}

@media (min-width: 900px) {
  .pf-pricing {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pf-plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--pf-border);
  border-radius: 12px;
}

.pf-plan--featured {
  border-color: var(--pf-teal);
  box-shadow: 0 8px 30px rgba(13, 148, 136, 0.12);
}

.pf-plan h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--pf-text);
  margin-bottom: 0.5rem;
}

.pf-plan__price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--pf-text);
  margin-bottom: 0.25rem;
}

.pf-plan__note {
  font-size: 0.85rem;
  color: var(--pf-muted);
  margin-bottom: 1.25rem;
}

.pf-plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}

.pf-plan li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--pf-muted);
}

.pf-plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pf-teal);
  font-weight: 700;
}

.pf-plan .pf-btn {
  width: 100%;
}

.pf-pricing-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--pf-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Built for */
.pf-built-for {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto;
}

.pf-built-for h2 {
  font-family: Inter, var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pf-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
}

.pf-built-for p {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--pf-text);
  margin: 0;
}

/* FAQ */
.pf-faq {
  max-width: 40rem;
  margin: 0 auto;
}

.pf-faq h2 {
  font-family: Inter, var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--pf-text);
}

.pf-faq details {
  border-bottom: 1px solid var(--pf-border);
  padding: 1rem 0;
}

.pf-faq summary {
  font-weight: 600;
  color: var(--pf-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.pf-faq summary::-webkit-details-marker {
  display: none;
}

.pf-faq summary::after {
  content: "⌄";
  color: var(--pf-muted);
  font-size: 1.1rem;
  transition: transform 0.15s ease;
}

.pf-faq details[open] summary::after {
  transform: rotate(180deg);
}

.pf-faq details p {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pf-muted);
}

/* Final CTA */
.pf-final-cta {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--pf-teal);
  color: #fff;
  text-align: center;
}

.pf-final-cta h2 {
  font-family: Inter, var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  text-transform: none;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.pf-final-cta p {
  font-size: 1.05rem;
  opacity: 0.92;
  margin: 0 auto 1.5rem;
  max-width: 28rem;
}

.pf-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.pf-back-link {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}

.pf-back-link:hover {
  color: #fff;
}

/* Products page — horizontal row list (products-preview style) */

.section--products-list {
  padding-block: var(--space-2xl);
}

.products-list {
  display: flex;
  flex-direction: column;
  width: 80vw;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
}
.product-row {
  display: grid;
  grid-template-columns: 5rem minmax(12rem, 17.5rem) 1fr auto;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  width: 100%;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  padding-inline: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(24, 31, 62, 0.12);
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, #fffaf8 0%, #f8f6f2 100%);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.product-row:first-child {
  border-top: 1px solid rgba(24, 31, 62, 0.12);
}

.product-row:hover,
.product-row:focus-visible {
  background: linear-gradient(135deg, #ffffff 0%, #ede8df 100%);
  box-shadow: 0 6px 28px rgba(24, 31, 62, 0.09);
  outline: none;
}

.product-row--flagship {
  background: linear-gradient(135deg, #fff8f0 0%, #f5efe6 100%);
}

.product-row--flagship:hover,
.product-row--flagship:focus-visible {
  background: linear-gradient(135deg, #fff9f0 0%, #f0e4d0 100%);
  box-shadow: 0 6px 28px rgba(24, 31, 62, 0.1);
}

.product-row__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0.35rem;
  background: #fff;
  border: 1px solid rgba(24, 31, 62, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(24, 31, 62, 0.06);
}

.product-row__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-row__name-block {
  min-width: 0;
}

.product-row__cat {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #198524;
}

.product-row__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-navy);
}

.product-row__tagline {
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.product-row__desc {
  margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--color-text);
}

.product-row__cta {
  flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-navy);
  padding-bottom: 0.25rem;
  white-space: nowrap;
}

.product-row:hover .product-row__cta,
.product-row:focus-visible .product-row__cta {
  color: var(--color-terracotta);
  border-bottom-color: var(--color-terracotta);
}

@media (max-width: 900px) {
  .product-row {
    grid-template-columns: 4rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 1rem 1.25rem;
  }

  .product-row__logo {
    grid-row: 1 / span 2;
    width: 4rem;
    height: 4rem;
  }

  .product-row__name-block {
    grid-column: 2 / 3;
  }

  .product-row__desc {
    grid-column: 2 / 3;
  }

  .product-row__cta {
    grid-column: 3 / 4;
    grid-row: 1;
    align-self: start;
  }
}

@media (max-width: 540px) {
  .product-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    text-align: left;
  }

  .product-row__logo {
    grid-row: auto;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
  }

  .product-row__name-block,
  .product-row__desc,
  .product-row__cta {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Homepage — matches geekybee.net Elementor layout */

.hero {
  font-size: clamp(2.5rem, 5.5vw, 5.33rem);
}

body[data-page="home"] .hero {
  min-height: min(72vh, 52rem);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 7rem);
  text-align: left;
}

body[data-page="home"] .hero::before {
  background: var(--gradient-night);
}

.hero__hex {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='64'%3E%3Cpolygon points='30,2 56,17 56,47 30,62 4,47 4,17' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 72px 64px;
  pointer-events: none;
  z-index: 0;
}

.hero__watermark {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(12rem, 38vw, 28rem);
  line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.1);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.hero__layout {
  display: block;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hero__visual img {
  width: min(100%, 16rem);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.35));
}

.hero__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-lg);
}

.hero__meta-row span:not(.hero__meta-divider) {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__meta-divider {
  width: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}

.hero__meta-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.85;
}

body[data-page="home"] .hero h1 {
  margin-bottom: 0.2em;
  text-transform: none;
  letter-spacing: -0.01em;
  text-shadow: none;
}

body[data-page="home"] .hero h2.hero__headline-sub {
  margin-bottom: var(--space-lg);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  text-align: left;
  text-shadow: none;
  color: #fff;
}

.hero__headline-line {
  display: block;
}

.hero__headline-line + .hero__headline-line {
  margin-top: 0.2em;
}

body[data-page="home"] .hero__lead {
  text-align: left;
  margin-inline: 0;
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.4375rem);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero__fixing {
  position: relative;
  display: inline-block;
}

.hero__fixing::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.28em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 22 3, 48 13, 72 7 S 102 4, 118 7' fill='none' stroke='%23f5c518' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.btn--honey {
  background: #f5c518;
  border-color: #f5c518;
  color: #181f3e;
  font-family: var(--font-button);
  font-weight: 600;
}

.btn--honey:hover {
  background: #e6b60f;
  border-color: #e6b60f;
  color: #181f3e;
}

/* SaaS pain-point band */
.section--saas {
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #0c0f1e 0%, #181f3e 100%);
  overflow: hidden;
  padding-bottom: var(--space-xl);
}

.section--saas .section__eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.section--saas h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.4375rem);
  font-weight: 500;
}

.section--saas h2 .text-accent {
  color: #f76f1e;
  font-style: italic;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.pain-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}

.pain-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(110, 193, 228, 0.15);
  color: var(--color-primary);
  font-size: 1.125rem;
}

.pain-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: #fff;
  margin: 0 0 var(--space-sm);
}

.pain-card__text {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.section--saas .section__closing {
  color: #9ba4be;
  text-align: center;
  max-width: 100%;
  margin: var(--space-xl) auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.section--saas .section__closing strong,
.section--saas .section__closing em {
  color: #f76f1e;
  font-style: italic;
}

/* Products showcase */
.section--products-showcase {
  background: linear-gradient(180deg, #181f3e 0%, #0c1024 100%);
  color: #fff;
  padding-top: var(--space-xl);
  padding-bottom: 0;
}

.section--products-showcase .section__header {
  margin-bottom: var(--space-xl);
}

.section--products-showcase .section__eyebrow {
  color: #f76f1e;
}

.section--products-showcase h2 {
  color: #fff;
}

.section--products-showcase .text-muted {
  color: rgba(255, 255, 255, 0.82);
}

.section--products-showcase .products-intro-muted {
  color: #6a748a;
}

.products-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.gb-card {
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  background: #fff;
  border: 1px solid #181f3d;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  color: var(--color-title);
}

.gb-card__header {
  background: #181f3d;
  color: #fff;
  padding: 1rem 1.125rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}

.gb-card__header h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-size: 1.375rem;
  font-weight: 500;
  margin: 0;
  color: #fff;
}

.gb-card__category {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0.25rem 0 0;
}

.gb-card__badge-owned {
  flex-shrink: 0;
  font-family: var(--font-eyebrow);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #198524;
  color: #fff;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  line-height: 1.2;
  text-align: center;
}

.gb-card__media {
  background: #f8f7f4;
  padding: var(--space-md);
  min-height: 14rem;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gb-card__media img {
  width: 100%;
  max-height: 12.5rem;
  object-fit: contain;
}

.gb-card__body {
  padding: 1.125rem 1.125rem 1.375rem;
  display: flex;
  flex-direction: column;
}

.gb-card__text {
  color: var(--color-secondary);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0 0 var(--space-md);
  flex: 1;
}

.gb-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.gb-card__built-for {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #198524;
  background: rgba(25, 133, 36, 0.1);
  border: 1px solid rgba(25, 133, 36, 0.35);
  padding: 0.35rem 0.625rem;
  border-radius: 4px;
}

.gb-card__link {
  font-family: var(--font-button);
  font-size: 0.875rem;
  font-weight: 500;
  color: #198524;
  text-decoration: none;
  border: 1px solid #198524;
  background: #f8f7f4;
  padding: 0.5rem 0.875rem;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.12);
}

.gb-card__link:hover {
  background: #198524;
  color: #fff;
}

.section--products-showcase .pricing-features {
  background: #f5f3eb;
  margin-top: var(--space-3xl);
  margin-inline: calc(50% - 50vw);
  padding: var(--space-3xl) max(1rem, calc(50vw - var(--max-width) / 2));
  border-top: none;
}

.section--products-showcase .pricing-feature {
  background: #fff;
  border: 1px solid #e8ebf4;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.pricing-feature__icon {
  width: 2rem;
  height: 2rem;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background: rgba(247, 111, 30, 0.12);
  color: #f76f1e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

/* About panel */
.about-panel {
  background: #e0e3ec;
  border: 1px solid #e0e3ec;
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.about-panel__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

.about-panel__photo {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.about-panel__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 32%;
}

.about-panel h2 {
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  color: #181f3e;
}

.about-panel h2 .text-accent {
  color: #f76f1e;
}

.about-panel .copy-em {
  font-style: italic;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.value-card {
  background: #f8f9fc;
  border: 1px solid #e8ebf4;
  border-radius: 9px;
  padding: 1.125rem;
}

.value-card__icon {
  color: #f76f1e;
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.value-card h3 {
  font-weight: 500;
  font-size: 1.125rem;
  color: #181f3d;
  margin: 0 0 var(--space-sm);
}

.value-card p {
  font-size: 0.875rem;
  color: #6a748a;
  margin: 0;
}

.about-panel .copy-em {
  font-style: italic;
}

.about-panel__muted {
  color: #4a5268;
}

.about-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* US agent band */
.section--us-agent {
  padding: 0;
}

.us-agent-band {
  background: #fff;
  color: rgb(28, 28, 26);
  border-top: 1px solid rgba(28, 28, 26, 0.12);
  border-bottom: 1px solid rgba(28, 28, 26, 0.12);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.us-agent-band__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.us-agent-flag {
  width: clamp(4rem, 7vw, 6rem);
  height: auto;
  flex-shrink: 0;
  border: 1px solid rgba(28, 28, 26, 0.15);
}

.us-agent-band__eyebrow {
  font-family: var(--font-mono, Menlo, Consolas, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(28, 28, 26, 0.55);
  margin: 0 0 0.375rem;
  font-weight: 500;
}

.us-agent-band__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.1;
  color: rgb(28, 28, 26);
  margin: 0 0 0.5rem;
}

.us-agent-band__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(28, 28, 26, 0.7);
  margin: 0 0 0.5rem;
  max-width: 62ch;
}

.us-agent-ticker {
  font-family: var(--font-mono, Menlo, Consolas, monospace);
  font-size: 0.71875rem;
  letter-spacing: 0.075em;
  color: rgba(28, 28, 26, 0.6);
  margin: 0.5rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.us-agent-ticker__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34a853;
  flex-shrink: 0;
}

.us-agent-band__email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: transparent;
  color: rgb(24, 31, 62);
  text-decoration: none;
  font-family: var(--font-mono, Menlo, Consolas, monospace);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.075em;
  border: 1px solid rgb(24, 31, 62);
  border-radius: 2px;
  white-space: nowrap;
}

.us-agent-band__email:hover {
  background: rgb(24, 31, 62);
  color: #fff;
}

/* Lifecycle carousel controls */
#lifecycle .lifecycle-kicker {
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 var(--space-md);
}

#lifecycle .section__header h2 {
  font-weight: 500;
  color: #fff;
}

/* Contact section header */
#contact .section__eyebrow {
  font-family: Consolas, "Courier New", ui-monospace, monospace;
  letter-spacing: 0.14em;
}

#contact .section__header h2 {
  font-weight: 500;
}

.lifecycle-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  width: 100%;
}

.lifecycle-nav__btn {
  font-family: var(--font-button);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.lifecycle-nav__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
}

.lifecycle-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .products-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .hero__layout {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero__visual {
    order: -1;
  }

  .hero__visual img {
    width: min(10rem, 40vw);
  }

  .hero__meta-row {
    justify-content: flex-start;
  }

  .hero__watermark {
    opacity: 0.35;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .pain-grid,
  .value-cards {
    grid-template-columns: 1fr;
  }

  .about-panel__grid {
    grid-template-columns: 1fr;
  }

  .us-agent-band__inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .us-agent-band__email {
    justify-self: start;
  }
}

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

  .products-showcase-grid {
    grid-template-columns: 1fr;
  }
}

/* Service landing pages — Create / our-services layout */

body[data-page="service"] .hero {
  min-height: min(68vh, 46rem);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  font-size: clamp(2.5rem, 5.5vw, 5.33rem);
}

.services-intro {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.services-intro__headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.services-intro__headline-left {
  width: 100%;
  text-align: left;
}

.services-intro__headline-right {
  width: 100%;
  text-align: right;
}

.services-intro__headline h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  margin: 0;
}

.services-intro > .container {
  width: min(calc(100% - 2rem), var(--hero-content-width));
  max-width: var(--hero-content-width);
}

.services-intro__phase {
  font-size: 0.9375rem;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
}

.services-intro__phase em {
  font-style: italic;
  color: var(--page-accent, var(--color-accent));
  font-weight: 600;
}

.services-intro__copy {
  width: 100%;
  max-width: none;
}

.services-intro__copy p + p {
  margin-top: var(--space-lg);
}

/* Web development feature */
.services-feature {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--color-border);
}

.services-feature__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  .services-feature__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.services-feature__media {
  position: relative;
  min-height: 22rem;
}

.services-feature__img-main {
  width: 72%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.services-feature__img-inset-a,
.services-feature__img-inset-b {
  position: absolute;
  width: 38%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 3px solid #fff;
}

.services-feature__img-inset-a {
  right: 4%;
  top: 8%;
}

.services-feature__img-inset-b {
  right: 0;
  bottom: 4%;
}

.services-feature__eyebrow {
  display: block;
  font-family: var(--font-eyebrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: var(--space-sm);
}

.services-feature__title {
  font-weight: 500;
  font-size: clamp(1.625rem, 1.25rem + 1.25vw, 34pt);
  line-height: 1.2;
  margin-bottom: var(--space-lg);
}

.services-feature__copy p + p {
  margin-top: var(--space-md);
}

.services-feature__cta {
  margin-top: var(--space-xl);
  text-align: center;
}

/* Our Services band */
.section--services-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: left;
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

.section--services-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-band-gradient, var(--gradient-green-soft));
  z-index: 0;
}

.section--services-band > .container {
  position: relative;
  z-index: 1;
}

.section--services-band h2 {
  font-weight: 500;
  color: #fff;
  font-size: clamp(2.25rem, 2rem + 2.5vw, 4rem);
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.section--services-band p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 40rem;
  margin-inline: 0;
  font-size: 1.0625rem;
}

/* Service offering cards */
.services-grid {
  display: grid;
  gap: var(--space-lg);
  padding-block: clamp(3rem, 7vw, 5rem);
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-offering {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.service-offering__title {
  line-height: 1.2;
  margin-bottom: var(--space-md);
  color: var(--color-title);
}

.service-offering__text {
  flex: 1;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  margin-bottom: var(--space-lg);
}

.service-offering .btn {
  align-self: flex-start;
}

/* Integration */
.services-integration {
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--color-border);
}

.services-integration__grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 900px) {
  .services-integration__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.services-integration h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin-bottom: var(--space-lg);
}

.services-underline {
  position: relative;
  display: inline-block;
}

.services-underline__svg {
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  bottom: -0.2em;
  width: calc(100% + 0.24em);
  height: 0.72em;
  overflow: visible;
  pointer-events: none;
}

.services-underline__path {
  fill: none;
  stroke: #8fd46a;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.services-integration__lead {
  font-weight: 600;
  color: var(--color-title);
  margin-bottom: var(--space-md);
}

.services-integration ul {
  margin: var(--space-lg) 0;
  padding-left: 1.25rem;
  color: var(--color-text);
}

.services-integration li + li {
  margin-top: var(--space-xs);
}

.services-integration__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.services-integration__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.services-integration__cta {
  margin-top: var(--space-xl);
  text-align: right;
}

/* Our Approach — vertical list */
.services-approach {
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--color-bg-alt);
}

.services-approach__intro {
  max-width: 42rem;
  margin-bottom: var(--space-2xl);
}

.services-approach__intro p + p {
  margin-top: var(--space-md);
}

.approach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
}

.approach-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.approach-list__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--page-accent, var(--color-accent));
  color: #fff;
  font-family: var(--font-eyebrow);
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

.approach-list__title {
  margin-bottom: var(--space-xs);
  color: var(--color-title);
}

.approach-list__text {
  color: var(--color-text);
  margin: 0;
}

/* Flexibility band */
.section--flexibility {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3rem, 7vw, 4.5rem);
}

.section--flexibility::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-band-gradient, var(--gradient-green-soft));
  z-index: 0;
}

.section--flexibility > .container {
  position: relative;
  z-index: 1;
}

.flexibility-grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 768px) {
  .flexibility-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.section--flexibility h2,
.section--flexibility h3 {
  font-variation-settings: "opsz" 102;
  font-weight: 500;
}

.section--flexibility h2 {
  color: #fff;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: var(--space-md);
}

.section--flexibility p,
.section--flexibility li {
  color: rgba(255, 255, 255, 0.9);
}

.section--flexibility ul {
  margin: var(--space-md) 0 0;
  padding-left: 1.25rem;
}

.section--flexibility li + li {
  margin-top: var(--space-sm);
}

.flexibility-grid h3 {
  color: #fff;
  font-size: 1.125rem;
  margin-bottom: var(--space-md);
}

/* Lifecycle — other phases */
.services-lifecycle {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.services-lifecycle__header {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 900px) {
  .services-lifecycle__header {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

.services-lifecycle__header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  margin: 0;
}

.lifecycle-cards {
  display: grid;
  gap: var(--space-md);
}

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

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

.lifecycle-cards :is(p, strong, b, ul, li) {
  font-family: var(--font-list);
  font-size: var(--font-size-mono-sm);
  font-weight: 600;
  line-height: 1.55;
}

.lifecycle-card {
  display: block;
  padding: var(--space-lg);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--lifecycle-accent, var(--color-accent));
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}

.lifecycle-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--color-title);
  text-decoration: none;
}

.lifecycle-card__title {
  margin-bottom: var(--space-sm);
  color: var(--color-title);
}

.lifecycle-card__text {
  color: var(--color-text);
  margin: 0;
}

.lifecycle-card--protect { --lifecycle-accent: #7180bd; }
.lifecycle-card--run { --lifecycle-accent: #3e5988; }
.lifecycle-card--automate { --lifecycle-accent: #9b1fa3; }
.lifecycle-card--grow { --lifecycle-accent: #f26d23; }

/* CTA */
.section--service-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6rem);
  color: #fff;
}

.section--service-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/images/services/cta-bg.jpg") center / cover no-repeat;
  z-index: 0;
  transition: transform 0.7s ease;
  transform: scale(1);
}

.section--service-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(12, 15, 30, 0.72), rgba(12, 15, 30, 0.72));
  z-index: 1;
  pointer-events: none;
}

.section--service-cta:hover::before {
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .section--service-cta::before {
    transition: none;
  }

  .section--service-cta:hover::before {
    transform: none;
  }
}

.section--service-cta > .container {
  position: relative;
  z-index: 2;
}

.section--service-cta h2 {
  color: #fff;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 102;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.section--service-cta p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 32rem;
  margin-inline: auto;
}

.section--service-cta .btn {
  margin-top: var(--space-xl);
}