.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-cta);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--color-orange);
  color: var(--color-bg-base);
}

.btn--primary:hover {
  background: #ffa56b;
  text-decoration: none;
  color: var(--color-bg-base);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: rgba(20, 24, 32, 0.22);
}

.btn--secondary:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  text-decoration: none;
}

/* Section heading pattern — shared across every page */

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-grey-mid);
  margin-bottom: var(--space-4);
}

.section-heading {
  font-size: var(--text-3xl);
  letter-spacing: -0.01em;
}

.section-lead {
  margin-top: var(--space-6);
  font-size: var(--text-md);
  color: var(--color-grey-mid);
  max-width: 56ch;
}

.accent {
  color: var(--color-orange);
}

@media (max-width: 720px) {
  .section-heading {
    font-size: var(--text-2xl);
  }
}

/* Scroll-reveal — elements enter via translateY + opacity, staggered by
   js/animations.js. Shared across every page. */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Shared decorative glow — cobalt accent only, never a fill, parallaxes at
   0.4x scroll speed via js/animations.js */

.section-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0, 74, 173, 0.16), transparent 70%);
}

/* Page intro — H1 + eyebrow + lead, used at the top of every non-hero page.
   Extra top padding clears the fixed nav, which has no opaque background
   to sit against until the user scrolls. */

.page-intro {
  position: relative;
  background: var(--color-bg-base);
  padding-top: calc(var(--space-9) + var(--space-9));
  padding-bottom: var(--space-9);
}

.page-intro h1 {
  max-width: 20ch;
}

.page-intro .section-lead {
  margin-top: var(--space-5);
}

@media (max-width: 720px) {
  .page-intro {
    padding-top: calc(var(--space-8) + var(--space-7));
    padding-bottom: var(--space-8);
  }
}

/* CTA beat — reused verbatim at the foot of every page.
   Values transcribed exactly from the Claude Design source of truth,
   "Opinomix CTA Section.dc.html" — hardcoded to match rather than mapped
   onto the site's general token palette, which uses different shades. */

.cta-beat {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.cta-strip {
  position: relative;
  z-index: 1;
  background: #F4F5F7;
  padding: 88px 0;
  border-top: 1px solid rgba(17, 19, 24, 0.07);
  border-bottom: 1px solid rgba(17, 19, 24, 0.09);
}

.cta-strip__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 10vw, 200px);
}

.cta-strip__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 560px;
}

.cta-strip__heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #12141A;
}

.cta-strip__sub {
  margin: 20px 0 0;
  color: #5F646C;
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 52ch;
}

.cta-strip__cta {
  flex: none;
  padding: 19px 34px;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(255, 145, 77, 0.28);
}

.cta-strip__cta:hover {
  background: #F8813A;
  box-shadow: 0 8px 22px rgba(255, 145, 77, 0.36);
}

.cta-strip__cta span {
  font-weight: 600;
  font-size: 18px;
}

@media (max-width: 720px) {
  .cta-strip {
    padding: var(--space-8) 0;
  }

  .cta-strip__row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .cta-strip__copy {
    align-items: center;
    text-align: center;
  }
}

/* Placeholder text marker */

.placeholder {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-grey-dim);
  font-size: var(--text-xs);
}

/* Seam-bridging forms — soft glowing orbs that sit across the join between
   two sections, drifting at 0.4x scroll speed via [data-parallax] (already
   wired in js/animations.js). One accent at a time, never both in one view. */

.seam-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  width: 900px;
  height: 700px;
  transform: translateX(-50%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.seam-glow--cobalt {
  background: radial-gradient(closest-side, rgba(42, 111, 219, 0.14), transparent 70%);
}

.seam-glow--orange {
  background: radial-gradient(closest-side, rgba(255, 145, 77, 0.16), transparent 70%);
}

@media (max-width: 720px) {
  .seam-glow {
    width: 600px;
    height: 500px;
  }
}

/* Footer marquee — capability keywords, constant linear speed, never paused
   except under reduced motion. Two duplicated tracks for a seamless loop. */

.marquee {
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
  padding: var(--space-4) 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-grey-dim);
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* Node tooltips — hover/tap bubbles for the small floating "chip" nodes
   next to the phone mockup (Home beat 03 and the App page hero). Shared
   by both via js/node-tooltips.js + [data-tooltip-node]; see that file
   for the show/hide and dynamic-placement logic. Position is set inline
   (top/left) by the script, not here. */

[data-tooltip-node] {
  cursor: pointer;
}

[data-tooltip-node]:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.node-tooltip {
  position: fixed;
  z-index: 300;
  width: max-content;
  max-width: 260px;
  box-sizing: border-box;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: 0 12px 30px -6px rgba(16, 24, 40, 0.16);
  color: var(--color-grey-mid);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}

.node-tooltip.is-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .node-tooltip {
    transition: opacity 140ms linear;
    transform: none;
  }
}

@media (max-width: 480px) {
  .node-tooltip {
    max-width: min(260px, 78vw);
  }
}