/* ==========================================================================
   Vexa Labeling — Design tokens & global foundation
   ========================================================================== */

:root {
  /* Color — surfaces */
  --color-bg:           #07080d;
  --color-bg-raised:    #0e1018;
  --color-bg-overlay:   rgba(14, 16, 24, 0.72);
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  /* Color — accent gradient (cyan → violet) */
  --color-accent-cyan:    #22d3ee;
  --color-accent-violet:  #a78bfa;
  --gradient-accent:      linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-violet) 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(167, 139, 250, 0.18) 100%);

  /* Color — text */
  --color-text:           #f4f6fb;
  --color-text-muted:     #a0a6ba;
  --color-text-subtle:    #6b7088;
  --color-text-on-accent: #07080d;

  /* Typography */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", "Noto Sans Arabic", system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  clamp(2.25rem, 5vw, 3.75rem);
  --text-hero: clamp(2.75rem, 7vw, 4.75rem);

  --leading-tight:  1.12;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Border radius scale */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;

  /* Layout */
  --container-max: 72rem;
  --header-height: 4.5rem;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration-sm: 200ms;
  --duration-md: 400ms;
  --duration-lg: 700ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scroll progress */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 2px;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.scroll-progress__bar {
  width: 0%;
  height: 100%;
  background: var(--gradient-accent);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
  transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress__bar {
    transition: none;
  }
}

::selection {
  background: rgba(34, 211, 238, 0.28);
  color: var(--color-text);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

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

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ==========================================================================
   Ambient background
   ========================================================================== */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
}

.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: bg-drift 90s linear infinite;
}

.bg-glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
}

.bg-glow--top {
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22) 0%, transparent 70%);
  animation: float 18s ease-in-out infinite;
}

.bg-glow--bottom {
  bottom: -30%;
  right: -10%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, transparent 70%);
  animation: float 22s ease-in-out infinite reverse;
}

/* ==========================================================================
   Layout utilities
   ========================================================================== */

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

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

.section + .band,
.band + .section {
  padding-block: var(--space-20);
}

.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--duration-sm) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

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

/* ==========================================================================
   Language switcher
   ========================================================================== */

.lang-switcher {
  position: relative;
}

.lang-switcher__select {
  appearance: none;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--duration-sm) var(--ease-out),
    color var(--duration-sm) var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239499ad' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.lang-switcher__select:hover,
.lang-switcher__select:focus {
  border-color: var(--color-border-hover);
  color: var(--color-text);
  outline: none;
}

.lang-switcher__select option {
  background: var(--color-bg-raised);
  color: var(--color-text);
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
}

.text-gradient {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

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

.btn--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
}

.btn--primary {
  position: relative;
  background: var(--gradient-accent);
  background-size: 200% 200%;
  color: var(--color-text-on-accent);
  animation: gradient-shift 6s ease infinite;
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(34, 211, 238, 0.22);
}

.btn--glow {
  isolation: isolate;
  box-shadow:
    0 0 20px rgba(34, 211, 238, 0.28),
    0 0 48px rgba(167, 139, 250, 0.14);
}

.btn--glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: var(--gradient-accent);
  background-size: 200% 200%;
  opacity: 0.45;
  filter: blur(14px);
  animation: gradient-shift 6s ease infinite;
  transition: opacity var(--duration-sm) var(--ease-out);
}

.btn--glow:hover {
  box-shadow:
    0 0 28px rgba(34, 211, 238, 0.38),
    0 0 64px rgba(167, 139, 250, 0.22);
}

.btn--glow:hover::before {
  opacity: 0.65;
}

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

.btn--ghost:hover {
  border-color: var(--color-border-hover);
  background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   Header & footer (minimal shell)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-overlay);
  backdrop-filter: blur(16px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-4);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* The brand mark rides on the element's background rather than an <img>, so the
   five legal pages pick it up without touching their markup. url() resolves
   against this stylesheet, not the document, so one path works from both the
   site root and legal/. */
.logo__mark {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  background: url("assets/logo-mark.svg") center / contain no-repeat;
}

.logo__text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.15;
}

.logo__by {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.site-nav {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-5);
}

/* Scoped to the list so it can't override the CTA button's own colour —
   `.site-nav a` outranked `.btn--primary` and washed out its label. */
.site-nav__list a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--duration-sm) var(--ease-out);
}

.site-nav__list a:hover {
  color: var(--color-text);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* CTA that lives inside the mobile drawer — desktop uses .site-header__cta */
.site-nav__cta {
  display: none;
}

/* ==========================================================================
   Mobile menu toggle
   ========================================================================== */

.nav-toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.nav-toggle__bars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.5625rem;
  background: currentColor;
  border-radius: 2px;
  transition: background var(--duration-sm) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--duration-sm) var(--ease-out);
}

.nav-toggle__bars::before {
  top: -0.375rem;
}

.nav-toggle__bars::after {
  top: 0.375rem;
}

/* Open state — bars morph into a close (×) icon */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-0.375rem) rotate(-45deg);
}

.site-footer {
  padding-block: var(--space-16) var(--space-10);
  border-top: 1px solid var(--color-border);
  background: rgba(7, 8, 13, 0.6);
}

/* Brand block plus three equal link columns. The brand column is wider because
   it carries the tagline and address; the link columns hold four items each so
   they end at roughly the same baseline and leave no dead band underneath. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(16rem, 1.6fr) repeat(3, minmax(8rem, 1fr));
  align-items: start;
  gap: var(--space-10) var(--space-8);
}

.logo--footer {
  margin-bottom: var(--space-3);
}

.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 16rem;
  line-height: 1.6;
  margin-bottom: var(--space-5);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.site-footer__email {
  color: var(--color-accent-cyan);
  transition: color var(--duration-sm) var(--ease-out);
}

.site-footer__email:hover {
  color: var(--color-text);
}

.site-footer__location {
  color: var(--color-text-muted);
  max-width: 18rem;
  line-height: 1.5;
}

.site-footer__sentiq {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-sm) var(--ease-out);
}

.site-footer__sentiq:hover {
  color: var(--color-text);
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-4);
}

.site-footer__col-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.site-footer__col-list a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-sm) var(--ease-out);
}

.site-footer__col-list a:hover {
  color: var(--color-text);
}

/* Legal pages carry no link columns, so their footer is just brand and copy
   on one line — no top border, since .site-footer already draws one. */
.site-footer__simple {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.site-footer__bottom-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 46rem;
}

.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  transition:
    color var(--duration-sm) var(--ease-out),
    border-color var(--duration-sm) var(--ease-out);
}

.footer-badge:hover {
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.site-footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.site-footer__entity {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   Hero — full viewport
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  padding-block: calc(var(--header-height) + var(--space-8)) var(--space-12);
  overflow: hidden;
}

/* Scene — grid + bounding boxes */
.hero__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__grid {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: hero-grid-drift 48s linear infinite;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, black 10%, transparent 72%);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, transparent 30%, var(--color-bg) 88%),
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 18%, transparent 82%, var(--color-bg) 100%);
}

.hero__boxes {
  position: absolute;
  inset: 0;
}

/* The hero copy column is up to 46rem wide. Below ~1200px it reaches the band
   the boxes occupy, so the decoration is dropped rather than left to cross the
   headline — the grid and glow still carry the scene. */
@media (max-width: 1200px) {
  .hero__boxes {
    display: none;
  }
}

/* Abstract bounding-box shapes */
.bbox {
  --bbox-w: 10rem;
  --bbox-h: 7rem;
  --bbox-x: 50%;
  --bbox-y: 50%;
  --parallax-x: 0px;
  --parallax-y: 0px;

  position: absolute;
  /* Logical offset so the whole cluster mirrors to the empty side under RTL,
     where the hero copy sits on the right. */
  inset-inline-start: var(--bbox-x);
  top: var(--bbox-y);
  width: var(--bbox-w);
  height: var(--bbox-h);
  opacity: 0.55;
  transform: translate(-50%, -50%) translate(var(--parallax-x), var(--parallax-y));
  will-change: transform, opacity;
  animation: bbox-opacity-breathe 5.5s ease-in-out infinite;
  animation-delay: var(--bbox-breath-delay, 0s);
}

/* Drift and scale both animate `transform`, so they cannot share an element —
   the later animation in the list would win and silence the other. Splitting
   them across two nodes lets the two transforms compose. */
.bbox__drift {
  --bbox-dur: 24s;
  --bbox-delay: 0s;

  width: 100%;
  height: 100%;
  animation: bbox-drift var(--bbox-dur) ease-in-out var(--bbox-delay) infinite;
}

.bbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 2px;
  animation: bbox-scale-breathe 5.5s ease-in-out var(--bbox-breath-delay, 0s) infinite;
}

.bbox__inner::before,
.bbox__inner::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--color-accent-cyan);
  border-style: solid;
  opacity: 0.7;
}

.bbox__inner::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.bbox__inner::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

.bbox--2 .bbox__inner,
.bbox--4 .bbox__inner {
  border-color: rgba(167, 139, 250, 0.32);
}

.bbox--2 .bbox__inner::before,
.bbox--2 .bbox__inner::after,
.bbox--4 .bbox__inner::before,
.bbox--4 .bbox__inner::after {
  border-color: var(--color-accent-violet);
}

.bbox__label {
  position: absolute;
  top: -1.125rem;
  left: 0;
  padding: 1px 5px;
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--color-accent-cyan);
  background: rgba(7, 8, 13, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 2px;
  white-space: nowrap;
}

.bbox--2 .bbox__label,
.bbox--4 .bbox__label {
  color: var(--color-accent-violet);
  border-color: rgba(167, 139, 250, 0.2);
}

/* Hero content */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

/* Lives inside .hero__scene, which covers #hero exactly — the same box the
   pointer is measured against, so --glow-x/y map straight onto cursor position.
   Driven by transform rather than left/top so tracking never triggers layout. */
.hero__cursor-glow {
  --glow-x: 0px;
  --glow-y: 0px;

  position: absolute;
  top: 0;
  left: 0;
  width: min(480px, 90vw);
  height: min(480px, 90vw);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--glow-x), var(--glow-y), 0) translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.14) 0%, rgba(167, 139, 250, 0.06) 40%, transparent 70%);
  transition: opacity var(--duration-md) var(--ease-out);
  will-change: transform;
}

.hero__cursor-glow.is-active {
  opacity: 1;
}

.hero__title-wrap {
  position: relative;
  margin-bottom: var(--space-6);
}

.hero__title-sweep {
  position: absolute;
  inset: -30% -8%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(34, 211, 238, 0.07) 48%,
    rgba(167, 139, 250, 0.06) 52%,
    transparent 62%
  );
  background-size: 220% 100%;
  animation: hero-sweep 9s ease-in-out infinite;
  mask-image: linear-gradient(to bottom, black 30%, transparent 95%);
}

.hero__title-wrap .hero__title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.hero__eyebrow {
  margin-bottom: var(--space-5);
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-hero);
  font-weight: 700;
  margin-bottom: var(--space-6);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  background: linear-gradient(
    90deg,
    var(--color-accent-cyan) 0%,
    var(--color-accent-violet) 40%,
    var(--color-accent-cyan) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-text-shift 5s ease-in-out infinite;
}

.hero__lead {
  font-size: clamp(var(--text-base), 2vw, var(--text-lg));
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  max-width: 34rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Load entrance animation — only hidden when JS can reveal it again */
.js [data-animate="hero-enter"] {
  opacity: 0;
  transform: translateY(28px);
}

.js .hero.is-ready [data-animate="hero-enter"] {
  animation: hero-enter var(--duration-lg) var(--ease-out) forwards;
  animation-delay: calc(180ms + var(--enter-index, 0) * 110ms);
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-grid-drift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(72px, 72px);
  }
}

@keyframes bbox-drift {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(14px, -18px) rotate(0.6deg);
  }
  66% {
    transform: translate(-10px, 12px) rotate(-0.4deg);
  }
}

@keyframes bbox-opacity-breathe {
  0%, 100% { opacity: 0.42; }
  50%      { opacity: 0.72; }
}

@keyframes bbox-scale-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

@keyframes hero-sweep {
  0%, 100% { background-position: 120% 0; }
  50%      { background-position: -20% 0; }
}

@keyframes gradient-text-shift {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

/* ==========================================================================
   Section headers
   ========================================================================== */

.section-header {
  max-width: 40rem;
  margin-bottom: var(--space-12);
}

.section-header__title {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-header__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.section-header--center {
  text-align: center;
  margin-inline: auto;
}

/* ==========================================================================
   Workflow timeline
   ========================================================================== */

.workflow {
  position: relative;
  overflow: hidden;
}

.timeline {
  --timeline-step-delay: 420ms;
  --timeline-connector-delay: 320ms;
  --timeline-fade-duration: 650ms;
  --timeline-draw-duration: 550ms;

  position: relative;
  padding-top: var(--space-2);
}

.timeline__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.timeline__track {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: var(--space-5);
}

.timeline__node {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  transition:
    color var(--duration-md) var(--ease-out),
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out),
    background var(--duration-md) var(--ease-out);
}

.timeline__node span {
  position: relative;
  z-index: 1;
}

.timeline__connector {
  position: relative;
  flex: 1;
  height: 2px;
  margin-inline: var(--space-2);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.timeline__connector-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gradient-accent);
  transform-origin: left center;
  transition: transform var(--timeline-draw-duration) var(--ease-out);
}

.js .timeline__connector-fill {
  transform: scaleX(0);
}

.timeline__body {
  padding-inline-end: var(--space-4);
}

/* Hidden only while JS is available to reveal it on scroll */
.js .timeline__body {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--timeline-fade-duration) var(--ease-out),
    transform var(--timeline-fade-duration) var(--ease-out);
}

.timeline__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.timeline__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Revealed state — sequential step + connector animation */
.timeline.is-revealed .timeline__item:nth-child(1) .timeline__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}

.timeline.is-revealed .timeline__item:nth-child(1) .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

.timeline.is-revealed .timeline__item:nth-child(1) .timeline__connector-fill {
  transform: scaleX(1);
  transition-delay: calc(var(--timeline-step-delay) * 0.6);
}

.timeline.is-revealed .timeline__item:nth-child(2) .timeline__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--timeline-step-delay) * 1 + var(--timeline-connector-delay));
}

.timeline.is-revealed .timeline__item:nth-child(2) .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
  transition-delay: calc(var(--timeline-step-delay) * 1 + var(--timeline-connector-delay));
}

.timeline.is-revealed .timeline__item:nth-child(1) .timeline__node,
.timeline.is-revealed .timeline__item:nth-child(2) .timeline__node,
.timeline.is-revealed .timeline__item:nth-child(3) .timeline__node,
.timeline.is-revealed .timeline__item:nth-child(4) .timeline__node,
.timeline.is-revealed .timeline__item:nth-child(5) .timeline__node {
  transition:
    color var(--duration-md) var(--ease-out),
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out),
    background var(--duration-md) var(--ease-out);
}

.timeline.is-revealed .timeline__item:nth-child(2) .timeline__connector-fill {
  transform: scaleX(1);
  transition-delay: calc(var(--timeline-step-delay) * 1.6 + var(--timeline-connector-delay));
}

.timeline.is-revealed .timeline__item:nth-child(3) .timeline__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--timeline-step-delay) * 2 + var(--timeline-connector-delay) * 2);
}

.timeline.is-revealed .timeline__item:nth-child(3) .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
  transition-delay: calc(var(--timeline-step-delay) * 2 + var(--timeline-connector-delay) * 2);
}

.timeline.is-revealed .timeline__item:nth-child(3) .timeline__connector-fill {
  transform: scaleX(1);
  transition-delay: calc(var(--timeline-step-delay) * 2.6 + var(--timeline-connector-delay) * 2);
}

.timeline.is-revealed .timeline__item:nth-child(4) .timeline__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--timeline-step-delay) * 3 + var(--timeline-connector-delay) * 3);
}

.timeline.is-revealed .timeline__item:nth-child(4) .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
  transition-delay: calc(var(--timeline-step-delay) * 3 + var(--timeline-connector-delay) * 3);
}

.timeline.is-revealed .timeline__item:nth-child(4) .timeline__connector-fill {
  transform: scaleX(1);
  transition-delay: calc(var(--timeline-step-delay) * 3.6 + var(--timeline-connector-delay) * 3);
}

.timeline.is-revealed .timeline__item:nth-child(5) .timeline__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--timeline-step-delay) * 4 + var(--timeline-connector-delay) * 4);
}

.timeline.is-revealed .timeline__item:nth-child(5) .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
  transition-delay: calc(var(--timeline-step-delay) * 4 + var(--timeline-connector-delay) * 4);
}

/* Reduced motion — show final state immediately */
.timeline.is-revealed-reduced .timeline__body {
  opacity: 1;
  transform: none;
}

.timeline.is-revealed-reduced .timeline__connector-fill {
  transform: scaleX(1);
}

.timeline.is-revealed-reduced .timeline__node {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border-color: transparent;
}

/* ==========================================================================
   Integrations / MCP band
   ========================================================================== */

.band {
  border-block: 1px solid var(--color-border);
}

.integrations {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(34, 211, 238, 0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(167, 139, 250, 0.05) 0%, transparent 60%);
}

.integrations .section-header {
  margin-bottom: var(--space-12);
}

/* Block-level so it never shares a line with the .eyebrow that follows it
   (.eyebrow is inline-block, which used to pull the two onto one row). */
.mcp-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.28);
  border-radius: var(--radius-full);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.12);
}

/* text-align can't centre a fit-content flex box — do it with auto margins */
.section-header--center .mcp-badge {
  margin-inline: auto;
}

.integrations__mcp-line {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.integrations__moat {
  margin-top: var(--space-5);
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.65;
  text-align: left;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: var(--radius-lg);
}

[dir="rtl"] .integrations__moat {
  text-align: right;
}

.integrations__line-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  fill: var(--color-accent-cyan);
  opacity: 0.75;
  pointer-events: none;
}

.integrations__line-label--a,
.integrations__line-label--b {
  animation: integration-label-pulse 2s ease-in-out infinite;
}

.integrations__line-label--b {
  animation-delay: 0.35s;
}

.integrations__line-label--c {
  animation: integration-label-pulse 2s ease-in-out 0.7s infinite;
}

@keyframes integration-label-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

/* Radial hub. The box is locked to the connector SVG's viewBox aspect ratio and
   every node is placed at the percentage of its viewBox coordinate, so the
   spokes meet the cards exactly at any width — no JS, no measuring. Change a
   coordinate here and you must change it in the SVG in index.html too. */
.integrations__hub {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  aspect-ratio: 800 / 560;
}

/* Centring uses the standalone `translate` property, not `transform`. The
   fade-up entrance and the hover lift both own `transform`; keeping the two on
   separate properties lets them compose instead of overwriting each other. */
.integrations__hub > .integration-card,
.integrations__hub > .integrations__core {
  position: absolute;
  translate: -50% -50%;
}

.integrations__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.integrations__line {
  fill: none;
  stroke: url(#integration-line-gradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 8 16;
  opacity: 0.6;
  animation: integration-line-flow 2s linear infinite;
}

.integrations__line--a { animation-delay: 0s; }
.integrations__line--b { animation-delay: 0.35s; }
.integrations__line--c { animation-delay: 0.7s; }

.integrations__pulse {
  fill: var(--color-accent-cyan);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: integration-node-pulse 2s ease-in-out infinite;
}

.integrations__pulse--a { animation-delay: 0s; }
.integrations__pulse--b { animation-delay: 0.4s; }
.integrations__pulse--c { animation-delay: 0.8s; }

/* Core sits at viewBox (400, 180), box 208 × 190; spokes start on its edges. */
.integrations__core {
  left: 50%;
  top: 32.143%;
  width: 26%;
  height: 33.929%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(34, 211, 238, 0.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 0 40px rgba(34, 211, 238, 0.1),
    0 0 80px rgba(167, 139, 250, 0.06);
}

.integrations__core-ring {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid rgba(34, 211, 238, 0.15);
  animation: integration-core-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

.integrations__core-mark {
  width: 2.75rem;
  height: 2.75rem;
  background: url("assets/logo-mark.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(114, 115, 189, 0.45));
}

.integrations__core-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Sized as a share of the hub, not in rem, so the card boxes scale with the
   connector coordinate space and the spokes keep meeting their edges. */
.integration-card {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 20%;
  height: 27.679%;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out),
    transform var(--duration-md) var(--ease-out);
}

.integration-card:hover {
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.1);
  transform: translateY(-3px);
}

/* All three are exactly 290 viewBox units from the core centre, so no card reads
   as nearer than the others. Mirrored about the vertical axis. */
.integration-card--claude { left: 15.525%; top: 16.143%; }
.integration-card--cursor { left: 84.475%; top: 16.143%; }
.integration-card--codex  { left: 50%;     top: 83.929%; }

.integration-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: rgba(167, 139, 250, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.18);
  color: var(--color-accent-violet);
}

/* The mirrored pair shares the cyan tile; the card on the vertical axis takes
   the violet one, so colour follows the layout's symmetry. */
.integration-card--claude .integration-card__icon,
.integration-card--cursor .integration-card__icon {
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.18);
  color: var(--color-accent-cyan);
}

.integration-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.integration-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

@keyframes integration-line-flow {
  to {
    stroke-dashoffset: -48;
  }
}

@keyframes integration-node-pulse {
  0%, 100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.8);
  }
}

@keyframes integration-core-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
}

.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--gradient-accent-soft);
  border-block: 1px solid rgba(34, 211, 238, 0.12);
}

.cta__glow {
  position: absolute;
  width: 50%;
  height: 100%;
  filter: blur(80px);
  opacity: 0.5;
}

.cta__glow--left {
  top: 0;
  left: -10%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
  animation: float 14s ease-in-out infinite;
}

.cta__glow--right {
  bottom: 0;
  right: -10%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, transparent 70%);
  animation: float 18s ease-in-out infinite reverse;
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
  max-width: 36rem;
  margin-inline: auto;
}

.cta__title {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  font-weight: 700;
}

.cta__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: 28rem;
}

.cta__btn {
  margin-top: var(--space-2);
}

.cta [data-animate="fade-up"].is-visible {
  transition-delay: calc(var(--stagger-index, 0) * 100ms);
}

/* ==========================================================================
   Features
   ========================================================================== */

.features {
  position: relative;
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform var(--duration-md) var(--ease-out),
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out),
    background var(--duration-md) var(--ease-out);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.feature-card--interactive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--color-accent-cyan),
    var(--color-accent-violet),
    var(--color-accent-cyan)
  );
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-md) var(--ease-out);
}

.feature-card--interactive:hover::after {
  opacity: 1;
  animation: gradient-shift 4s ease infinite;
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-accent-soft);
  opacity: 0;
  transition: opacity var(--duration-md) var(--ease-out);
  pointer-events: none;
}

.feature-card:hover {
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    0 0 32px rgba(34, 211, 238, 0.1),
    0 0 64px rgba(167, 139, 250, 0.06);
}

.feature-card[data-animate="fade-up"].is-visible:hover {
  transform: translateY(-8px);
}

.feature-card--interactive.is-tilting {
  transition: transform 60ms linear, box-shadow var(--duration-md) var(--ease-out), border-color var(--duration-md) var(--ease-out);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.18);
  color: var(--color-accent-cyan);
  transition:
    background var(--duration-md) var(--ease-out),
    border-color var(--duration-md) var(--ease-out),
    color var(--duration-md) var(--ease-out);
}

.feature-card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.feature-card:hover .feature-card__icon {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.35);
  color: var(--color-accent-cyan);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
}

.feature-card__title {
  position: relative;
  z-index: 1;
  font-size: var(--text-lg);
  font-weight: 600;
}

.feature-card__text {
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ==========================================================================
   Traction metrics
   ========================================================================== */

.traction {
  padding-block: var(--space-8) var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.traction.section {
  padding-block: var(--space-8) var(--space-16);
}

.traction__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.traction-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 7rem;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out);
}

.traction-stat:hover {
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.08);
}

.traction-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.traction-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
  max-width: 10rem;
}

/* Names the concrete formats / tools behind the number, so the strip states a
   verifiable fact rather than an unsourced statistic. */
.traction-stat__detail {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.5;
  max-width: 12rem;
  text-wrap: balance;
}

/* ==========================================================================
   Problem → Solution
   ========================================================================== */

.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 52rem;
  margin-inline: auto;
}

.problem-card {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.problem-card--solution {
  background: rgba(34, 211, 238, 0.05);
  border-color: rgba(34, 211, 238, 0.22);
}

.problem-card__label {
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.problem-card--solution .problem-card__label {
  color: var(--color-accent-cyan);
}

.problem-card__text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ==========================================================================
   Deployment card
   ========================================================================== */

.deploy-card {
  margin-top: var(--space-16);
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
}

.deploy-card .eyebrow {
  margin-bottom: var(--space-3);
}

.deploy-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.deploy-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deploy-card__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.deploy-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gradient-accent);
}

/* ==========================================================================
   Security
   ========================================================================== */

.security__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.security-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
  transition:
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out);
}

.security-card:hover {
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.security-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.security-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ==========================================================================
   Comparison table
   ========================================================================== */

/* Six columns never fit a phone, so the table scrolls sideways inside this
   wrapper while the criterion column stays pinned. tabindex makes the scroll
   area keyboard-reachable, which browsers otherwise skip for overflow regions. */
.compare__scroller {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  -webkit-overflow-scrolling: touch;
}

.compare__scroller:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.5);
  outline-offset: 2px;
}

.compare__table {
  width: 100%;
  min-width: 68rem;
  border-collapse: collapse;
  text-align: start;
}

.compare__table th,
.compare__table td {
  padding: var(--space-4) var(--space-5);
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td {
  border-bottom: 0;
}

.compare__table thead th {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.04);
}

.compare__table tbody td {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.compare__table tbody th {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

/* Pinned so the row label survives horizontal scrolling. The opaque background
   is required — a translucent one lets scrolled cells show through. */
.compare__criterion {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-width: 12rem;
  background: #0a0b11;
}

.compare__table thead .compare__criterion {
  z-index: 2;
  background: #101219;
}

.compare__own {
  background: rgba(34, 211, 238, 0.06);
  color: var(--color-text);
  border-inline: 1px solid rgba(34, 211, 238, 0.18);
}

.compare__table thead .compare__own {
  color: var(--color-text);
  background: rgba(34, 211, 238, 0.12);
}

.compare__table tbody .compare__own {
  color: var(--color-text);
  font-weight: 500;
}

.compare__row--highlight .compare__own {
  background: rgba(34, 211, 238, 0.11);
}

.compare__note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-subtle);
  text-align: center;
}

/* ==========================================================================
   Roadmap
   ========================================================================== */

.roadmap__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.roadmap-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
  transition:
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out);
}

.roadmap-card:hover {
  border-color: rgba(34, 211, 238, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.roadmap-card__index {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.roadmap-card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.roadmap-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.roadmap__cta {
  margin-top: var(--space-10);
  text-align: center;
}

.roadmap__note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* ==========================================================================
   Investment & partnership
   ========================================================================== */

.invest {
  position: relative;
  background:
    radial-gradient(ellipse 55% 60% at 50% 40%, rgba(167, 139, 250, 0.05) 0%, transparent 70%);
}

.invest__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.invest-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  transition:
    border-color var(--duration-md) var(--ease-out),
    background var(--duration-md) var(--ease-out);
}

.invest-card:hover {
  border-color: rgba(167, 139, 250, 0.28);
  background: rgba(255, 255, 255, 0.05);
}

.invest-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.invest-card__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.invest__cta {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.invest__note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.6;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
  max-width: 60rem;
  margin-inline: auto;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
  transition:
    border-color var(--duration-md) var(--ease-out),
    box-shadow var(--duration-md) var(--ease-out),
    transform var(--duration-md) var(--ease-out);
}

.pricing-card:hover {
  border-color: rgba(34, 211, 238, 0.2);
  transform: translateY(-4px);
}

.pricing-card--featured {
  background: rgba(34, 211, 238, 0.06);
  border-color: rgba(34, 211, 238, 0.28);
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.08);
}

.pricing-card__badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-cyan);
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: var(--radius-full);
}

.pricing-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
}

.pricing-card__desc {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.pricing-card .btn {
  width: 100%;
  margin-top: var(--space-2);
}

/* ==========================================================================
   Team
   ========================================================================== */

.team__panel {
  max-width: 54rem;
  margin-inline: auto;
  padding: var(--space-12) var(--space-8);
  text-align: center;
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.team__header {
  margin-bottom: 0;
}

.team__link {
  margin-top: var(--space-6);
}

.team__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  text-align: start;
  list-style: none;
}

.team-fact__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.team-fact__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* `display` beats the HTML `hidden` attribute, so the empty roster used to
   render as a stray divider plus ~130px of dead space. */
[hidden] {
  display: none !important;
}

.team__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.team__member-photo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-border);
}

.team__member-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.team__member-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-10) var(--space-12);
  align-items: start;
  max-width: 56rem;
  margin-inline: auto;
}

.contact__intro {
  margin-bottom: 0;
  max-width: none;
}

.contact__intro .section-header__lead {
  font-size: var(--text-base);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--color-border);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-form__field label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.contact-form__optional {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: rgba(7, 8, 13, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-sm) var(--ease-out),
    box-shadow var(--duration-sm) var(--ease-out);
  resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

/* Native select chrome ignores the panel's dark palette — draw our own caret.
   Scoped through .contact-form__field so the shared `background` shorthand
   above doesn't wipe out the caret's background-image. */
.contact-form__field .contact-form__select {
  appearance: none;
  cursor: pointer;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-subtle) 50%),
    linear-gradient(135deg, var(--color-text-subtle) 50%, transparent 50%);
  background-position:
    right calc(var(--space-4) + 5px) center,
    right var(--space-4) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

[dir="rtl"] .contact-form__field .contact-form__select {
  background-position:
    left var(--space-4) center,
    left calc(var(--space-4) + 5px) center;
}

.contact-form__select option {
  color: var(--color-text);
  background: #0b0d14;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-text-subtle);
}

.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* The shared field rule sets width:100% on inputs, which would stretch the
   checkbox across the row — pin it back to its intrinsic size. */
.contact-form__consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  padding: 0;
  accent-color: var(--color-accent-cyan);
  cursor: pointer;
}

.contact-form__consent label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-muted);
  cursor: pointer;
}

.contact-form__consent a {
  color: var(--color-accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Takes the form's place after a submission — same card treatment so the panel
   sits where the form was rather than looking like a stray notice. */
.contact-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  border-radius: var(--radius-xl);
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.contact-sent__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.contact-sent__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-sent__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
}

.contact-sent__text {
  max-width: 28rem;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.contact-form__submit {
  align-self: flex-start;
}

.contact-form__submit:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* ==========================================================================
   Animation keyframes
   ========================================================================== */

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-24px) translateX(12px);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes bg-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 64px 64px;
  }
}

/* ==========================================================================
   Animation utilities
   ========================================================================== */

/* Scroll-triggered fade-up (activated by JS).
   Scoped to .js so the page stays fully readable when scripts don't run. */
.js [data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition:
    opacity var(--duration-lg) var(--ease-out),
    transform var(--duration-lg) var(--ease-out);
}

.js [data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Continuous float utility */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Gradient shift utility */
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}

/* Stagger helper — apply inline style or via JS: --stagger-index */
[data-animate="fade-up"].is-visible {
  transition-delay: calc(var(--stagger-index, 0) * 80ms);
}

.features__grid [data-animate="fade-up"].is-visible {
  transition-delay: calc(var(--stagger-index, 0) * 85ms);
}

.integrations__hub [data-animate="fade-up"].is-visible {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

.cta__inner [data-animate="fade-up"].is-visible {
  transition-delay: calc(var(--stagger-index, 0) * 100ms);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

  .js [data-animate="fade-up"],
  .js [data-animate="hero-enter"] {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .bg-dots,
  .hero__grid {
    animation: none;
  }

  .bbox__drift,
  .bbox__inner {
    animation: none;
  }

  .bbox {
    animation: none;
    opacity: 0.55;
  }

  .hero__title-sweep,
  .hero__cursor-glow {
    display: none;
  }

  .feature-card--interactive::after {
    display: none;
  }

  .integrations__line-label {
    opacity: 0.7;
    animation: none;
  }

  .js .timeline__body {
    opacity: 1;
    transform: none;
  }

  .timeline__connector-fill {
    transform: none;
  }

  .timeline__node {
    color: var(--color-text-on-accent);
    background: var(--gradient-accent);
    border-color: transparent;
  }

  .integrations__line {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.45;
  }

  .integrations__pulse,
  .integrations__core-ring,
  .cta__glow {
    animation: none;
    opacity: 0.5;
  }
}

/* ==========================================================================
   Legal pages (legal/*.html)
   ========================================================================== */

.legal-page {
  padding-block: calc(var(--header-height) + var(--space-16)) var(--space-20);
}

.legal-page__layout {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-12);
  align-items: start;
}

.legal-page__intro {
  margin-bottom: var(--space-12);
  max-width: 44rem;
}

.legal-page__title {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.legal-page__lead {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Sticky index of the four documents; collapses above the text on narrow screens. */
.legal-toc {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.legal-toc__title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}

.legal-toc__list a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-block: var(--space-1);
  transition: color var(--duration-sm) var(--ease-out);
}

.legal-toc__list a:hover {
  color: var(--color-text);
}

.legal-doc {
  padding-top: var(--space-10);
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-border);
  max-width: 46rem;
}

.legal-doc:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

/* Anchor targets must clear the fixed header when jumped to from the index. */
.legal-doc {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.legal-doc__title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}

.legal-doc__updated {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-6);
}

.legal-doc h3 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.legal-doc p,
.legal-doc li {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.legal-doc p + p {
  margin-top: var(--space-3);
}

.legal-doc ul,
.legal-doc ol {
  margin-top: var(--space-3);
  padding-inline-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-doc ul {
  list-style: disc;
}

.legal-doc ol {
  list-style: decimal;
}

.legal-doc strong {
  color: var(--color-text);
  font-weight: 500;
}

.legal-doc a {
  color: var(--color-accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-note {
  margin-top: var(--space-12);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-subtle);
  max-width: 46rem;
}

/* Legal text is authoritative in Turkish only — the other locales are courtesy
   translations, and the banner has to say so on every non-TR page. */
.legal-banner {
  max-width: 46rem;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(167, 139, 250, 0.28);
  background: rgba(167, 139, 250, 0.08);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.legal-langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
}

.legal-langs a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition:
    border-color var(--duration-sm) var(--ease-out),
    color var(--duration-sm) var(--ease-out);
}

.legal-langs a:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

.legal-langs a[aria-current="page"] {
  color: var(--color-text);
  border-color: rgba(34, 211, 238, 0.4);
  background: rgba(34, 211, 238, 0.08);
}

@media (max-width: 900px) {
  .legal-page__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .legal-toc {
    position: static;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .site-nav__list {
    gap: var(--space-4);
  }

  .site-nav__list a {
    font-size: var(--text-xs);
  }

  .site-nav__item--secondary {
    display: none;
  }
}

/* Below 1080px the nav collapses into a JS-driven drawer under the header.
   Without JS the drawer could never open, so the toggle and nav are hidden and
   the footer nav (same six links) serves as the fallback. */
@media (max-width: 1080px) {
  html:not(.js) .site-nav,
  html:not(.js) .nav-toggle {
    display: none;
  }

  .js .nav-toggle {
    display: block;
  }

  .js .site-header__cta {
    display: none;
  }

  .js .site-nav {
    /* base .site-nav is a centred flex row — as a drawer it must stack, or the
       list and the CTA sit side by side and the CTA stretches to full height */
    display: block;
    flex: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--header-height));
    padding: var(--space-5) var(--space-6) var(--space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--duration-sm) var(--ease-out),
      transform var(--duration-sm) var(--ease-out),
      visibility 0s linear var(--duration-sm);
  }

  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
  }

  body.has-nav-open {
    overflow: hidden;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* "Security" is dropped from the cramped desktop bar — the drawer has room */
  .js .site-nav__item--secondary {
    display: block;
  }

  .js .site-nav__list a {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-border);
  }

  .js .site-nav__cta {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-6);
  }
}

@media (max-width: 1024px) {
  .section,
  .section + .band,
  .band + .section {
    padding-block: var(--space-16);
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .traction__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .security__grid,
  .pricing__grid,
  .invest__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }

  .pricing-card {
    padding: var(--space-6) var(--space-4);
  }

  .contact__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 36rem;
  }

  .timeline__text {
    font-size: var(--text-xs);
  }

  .timeline__body {
    padding-inline-end: var(--space-2);
  }
}

@media (max-width: 900px) {
  .security__grid,
  .pricing__grid,
  .roadmap__grid,
  .invest__grid {
    grid-template-columns: 1fr;
    max-width: 22rem;
    margin-inline: auto;
  }

  .team__facts {
    grid-template-columns: 1fr;
    max-width: 22rem;
    margin-inline: auto;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .container {
    width: min(100% - var(--space-6), var(--container-max));
  }

  .compare__table {
    min-width: 44rem;
  }

  .compare__table th,
  .compare__table td {
    padding: var(--space-3) var(--space-4);
  }

  .compare__criterion {
    min-width: 8.5rem;
  }

  .section,
  .section + .band,
  .band + .section {
    padding-block: var(--space-12);
  }

  .cta {
    padding-block: var(--space-16);
  }

  .hero {
    min-height: auto;
    padding-block: calc(var(--header-height) + var(--space-10)) var(--space-10);
    align-items: center;
  }

  .hero__content {
    padding-bottom: var(--space-2);
  }

  .hero__title {
    gap: var(--space-1);
    margin-bottom: var(--space-5);
  }

  .hero__lead {
    margin-bottom: var(--space-8);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* Tuck boxes toward edges on small screens */
  .bbox--1 { --bbox-x: 88%; --bbox-y: 14%; opacity: 0.35; }
  .bbox--2 { --bbox-x: 8%;  --bbox-y: 58%; opacity: 0.35; }
  .bbox--3 { --bbox-x: 82%; --bbox-y: 78%; opacity: 0.3; }
  .bbox--4 { --bbox-x: 18%; --bbox-y: 18%; opacity: 0.3; }
  .bbox--5 { display: none; }

  .timeline__list {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 28rem;
    margin-inline: auto;
  }

  .timeline__item {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
    padding-bottom: var(--space-8);
  }

  .timeline__item:last-child {
    padding-bottom: 0;
  }

  .timeline__track {
    flex-direction: column;
    align-items: center;
    width: auto;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .timeline__connector {
    flex: none;
    width: 2px;
    height: 100%;
    min-height: 3.5rem;
    margin: var(--space-2) 0 0;
  }

  .timeline__connector-fill {
    transform: scaleY(0);
    transform-origin: top center;
  }

  .timeline.is-revealed .timeline__connector-fill,
  .timeline.is-revealed-reduced .timeline__connector-fill {
    transform: scaleY(1);
  }

  .timeline__body {
    padding-inline-end: 0;
    padding-top: var(--space-1);
    flex: 1;
  }

  .timeline__title {
    font-size: var(--text-lg);
  }

  .timeline__text {
    font-size: var(--text-sm);
  }

  /* Below this width the radial diagram has no room — unwind the aspect-locked
     coordinate box back to a plain stacked column. */
  .integrations__hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    aspect-ratio: auto;
    padding-block: var(--space-2);
  }

  .integrations__hub > .integration-card,
  .integrations__hub > .integrations__core {
    position: static;
    translate: none;
  }

  .integrations__lines {
    display: none;
  }

  .integration-card {
    width: 100%;
    max-width: 16rem;
    height: auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
  }

  /* Core is last in the DOM (the SVG spokes read better that way); stacked, it
     belongs at the top as the thing the three tools connect to. */
  .integrations__core {
    order: -1;
    width: 100%;
    max-width: 16rem;
    height: auto;
    flex-direction: row;
    justify-content: center;
    padding: var(--space-5) var(--space-6);
  }

  /* Brand keeps the full row; the three link columns share the one below it. */
  .site-footer__top {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .problem__grid {
    grid-template-columns: 1fr;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

  .contact-form__submit {
    width: 100%;
  }

  .team__panel {
    padding: var(--space-8) var(--space-5);
  }

  .deploy-card {
    margin-top: var(--space-12);
    padding: var(--space-6);
  }
}

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

  .traction__grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    margin-bottom: var(--space-12);
  }
}

/* Three link columns leave ~110px each on a phone, which breaks labels like
   "KVKK Aydınlatma Metni" over three lines. Two columns keep them readable. */
@media (max-width: 560px) {
  .site-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-5);
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - var(--space-5), var(--container-max));
  }

  .lang-switcher__select {
    max-width: 6.5rem;
    padding-inline-end: var(--space-6);
  }

  .site-header__actions {
    gap: var(--space-2);
  }

  .section,
  .section + .band,
  .band + .section {
    padding-block: var(--space-12);
  }

  .logo__text {
    font-size: var(--text-base);
  }

  .site-header__actions .btn {
    padding-inline: var(--space-4);
    font-size: var(--text-xs);
  }

  .bbox--3,
  .bbox--4 {
    display: none;
  }

  .cta__title {
    font-size: var(--text-2xl);
  }

  .cta__lead {
    font-size: var(--text-base);
  }

  .cta__btn {
    width: 100%;
  }
}

/* ==========================================================================
   RTL (Arabic)
   ========================================================================== */

/* NOTE: `dir="rtl"` already reverses flex row layout. Adding `row-reverse` on
   top of it flips the axis back to LTR, which is why the header, nav, hero
   buttons and footer links used to render in visually reversed order under
   Arabic. Those overrides are intentionally absent — the browser handles it. */

[dir="rtl"] .hero__content,
[dir="rtl"] .section-header,
[dir="rtl"] .section-header--center,
[dir="rtl"] .cta__inner,
[dir="rtl"] .team__panel,
[dir="rtl"] .traction__note {
  text-align: right;
}

[dir="rtl"] .section-header--center,
[dir="rtl"] .team__panel,
[dir="rtl"] .traction__note {
  text-align: center;
}

[dir="rtl"] .section-header--center {
  margin-inline: auto;
}

[dir="rtl"] .timeline__connector-fill {
  transform-origin: right center;
}

[dir="rtl"] .timeline.is-revealed .timeline__connector-fill,
[dir="rtl"] .timeline.is-revealed-reduced .timeline__connector-fill {
  transform: scaleX(1);
}

[dir="rtl"] .bbox__label {
  left: auto;
  right: 0;
}

[dir="rtl"] .site-footer__top,
[dir="rtl"] .site-footer__bottom {
  direction: rtl;
}

[dir="rtl"] .integration-card,
[dir="rtl"] .feature-card,
[dir="rtl"] .security-card,
[dir="rtl"] .invest-card,
[dir="rtl"] .pricing-card,
[dir="rtl"] .problem-card,
[dir="rtl"] .deploy-card,
[dir="rtl"] .contact-form {
  text-align: right;
}

[dir="rtl"] .mcp-badge {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .integrations__line-label {
  direction: ltr;
}

[dir="rtl"] .lang-switcher__select {
  background-position: left 0.5rem center;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
}

/* .logo__text-wrap is a column flex; its cross axis already follows `dir`,
   so an explicit align-items here would push the text to the wrong edge. */

/* Both already use `align-self: flex-start`, which in a column flex resolves to
   the inline-start edge — the right side under RTL. No override needed. */

/* The stacked mobile timeline, integration cards and hub core are all plain
   flex rows — `dir="rtl"` mirrors them on its own, so no overrides here. */