/* GENERE depuis css/style.css. Ne pas editer, regenerer. */

/* ─── Reset & Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080b16;
  --bg2:       #0b1020;
  --surface:   #0e1426;
  --surface2:  #0f1628;
  --border:    #141c30;
  --border2:   #1e2840;
  --txt:       #dde5f0;
  --txt2:      #8b99b3;
  --txt3:      #8291ab;
  --cyan:      #70D8E8;
  --cyan-dim:  #4FB4C6;
  --cyan-glow: rgba(112,216,232,0.12);
  --cyan-glow2:rgba(112,216,232,0.06);
  --purple:    #C060EC;
  --purple-dim:#9B49C0;
  --purple-glow:rgba(192,96,236,0.12);
  --radius:    6px;
  --radius-lg: 12px;
  --max:       1100px;
}

/* overflow-y: scroll keeps the scrollbar gutter reserved on every page, so the
   nav width (and layout) is identical whether a page is long or short.
   No overflow-x here: horizontal overflow is contained by body's `clip` below,
   which — unlike `hidden` — does NOT break `position: sticky` on the nav. */
html { scroll-behavior: smooth; overflow-y: scroll; background: var(--bg); }

body {
  background: transparent;
  color: var(--txt);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: var(--cyan); text-decoration: none; transition: color 0.15s; }
a:hover { color: #fff; }

/* ─── Aurora (animated ambient background) ──────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  background:
    radial-gradient(ellipse 55% 45% at 18% 15%, rgba(112,216,232,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 82% 12%, rgba(192,96,236,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 50% 95%, rgba(126,186,234,0.12) 0%, transparent 65%);
  filter: blur(70px) hue-rotate(calc(var(--scroll-progress, 0) * 50deg));
  pointer-events: none;
  animation: aurora-drift 42s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(4%, -4%, 0) scale(1.12) rotate(6deg); }
  100% { transform: translate3d(-4%, 3%, 0) scale(1.05) rotate(-5deg); }
}

/* ─── Noise overlay ──────────────────────────────────────────────────── */
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ─── Signal path overlay ────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='480' height='480' viewBox='0 0 480 480' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-width='1'%3E%3Cpath d='M-20 120 H160 L260 240 H520' stroke='%2370D8E8' stroke-opacity='0.5'/%3E%3Cpath d='M-20 360 H200 L320 120 H520' stroke='%23C060EC' stroke-opacity='0.45'/%3E%3Cpath d='M80 -20 V80 L200 200 V500' stroke='%2370D8E8' stroke-opacity='0.3'/%3E%3Cpath d='M400 -20 V180 L280 300 V500' stroke='%23C060EC' stroke-opacity='0.3'/%3E%3Cpath d='M-20 420 H440' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3C/g%3E%3Cg fill='%2370D8E8' fill-opacity='0.6'%3E%3Ccircle cx='160' cy='120' r='3'/%3E%3Ccircle cx='260' cy='240' r='3'/%3E%3Ccircle cx='200' cy='200' r='3'/%3E%3C/g%3E%3Cg fill='%23C060EC' fill-opacity='0.6'%3E%3Ccircle cx='200' cy='360' r='3'/%3E%3Ccircle cx='320' cy='120' r='3'/%3E%3Ccircle cx='280' cy='300' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 800px 800px;
  background-attachment: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  transform:
    perspective(900px)
    rotateX(calc(var(--scroll-progress, 0) * 20deg))
    rotateY(calc(var(--scroll-progress, 0) * -14deg))
    translate3d(calc(var(--scroll-progress, 0) * -120px), calc(var(--scroll-progress, 0) * 180px), calc(var(--scroll-progress, 0) * -140px))
    rotate(calc(var(--scroll-progress, 0) * 8deg))
    scale(calc(1 + var(--scroll-progress, 0) * 0.35));
}

/* ─── Ambient background video (site-wide) ──────────────────────────── */
.bg-ambient-video {
  position: fixed;
  inset: -10%;
  z-index: -2;
  width: 120%;
  height: 120%;
  object-fit: cover;
  opacity: calc(0.07 + var(--scroll-progress, 0) * 0.05);
  mix-blend-mode: screen;
  filter: saturate(1.5);
  pointer-events: none;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .bg-ambient-video,
  .page-hero-video {
    display: none;
  }
}

/* ─── Vertical grid lines + scroll-driven light sweep ───────────────────── */
html::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle 480px at calc(10% + var(--scroll-progress, 0) * 75%) calc(15% + var(--scroll-progress, 0) * 65%), rgba(112,216,232,0.22), transparent 70%),
    radial-gradient(circle 420px at calc(90% - var(--scroll-progress, 0) * 75%) calc(85% - var(--scroll-progress, 0) * 65%), rgba(192,96,236,0.20), transparent 70%),
    repeating-linear-gradient(
      to right,
      var(--border) 0px,
      var(--border) 1px,
      transparent 1px,
      transparent 160px
    );
  background-blend-mode: screen, screen, normal;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* ─── Typography ─────────────────────────────────────────────────────── */
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem);  font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
p  { color: var(--txt2); }

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.label::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--cyan);
  opacity: 0.6;
}

/* ─── Layout ─────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
section { padding: 104px 0; }

/* ─── Scroll animations ──────────────────────────────────────────────── */
.reveal-enabled [data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.reveal-enabled [data-anim="left"]  { transform: perspective(1000px) translateX(-90px) rotateY(-16deg); }
.reveal-enabled [data-anim="right"] { transform: perspective(1000px) translateX(90px) rotateY(16deg); }
.reveal-enabled [data-anim="scale"] { transform: perspective(1000px) translateY(46px) rotateX(10deg) scale(0.92); }
.reveal-enabled [data-anim].in {
  opacity: 1;
  transform: none;
}
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }

/* ─── Reveal-on-scroll text (word by word) ──────────────────────────────── */
[data-reveal] .reveal-word {
  display: inline-block;
  opacity: 0.18;
  filter: blur(3px);
  transform: translateY(0.15em);
  transition: opacity 0.5s cubic-bezier(.16,1,.3,1), filter 0.5s cubic-bezier(.16,1,.3,1), transform 0.5s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in .reveal-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ─── Navigation ─────────────────────────────────────────────────────── */
body > nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5,7,15,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 62px;
  gap: 22px;
}

.nav-links { flex: 1; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-logo {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  padding: 3px;
  display: block;
  flex-shrink: 0;
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 1px;
}

.nav-brand .brand-name   { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt3); white-space: nowrap; }
.nav-brand .brand-product { font-size: 16px; font-weight: 800; letter-spacing: 0.05em; color: var(--txt); white-space: nowrap; }

/* ─── Logo ───────────────────────────────────────────────────────────── */
.logo-wrap {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logo-wrap img { display: block; }

.footer-logo {
  height: 56px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 4px;
  display: block;
}

.nav-links { display: flex; align-items: center; gap: 15px; list-style: none; }
.nav-links li { white-space: nowrap; }
.nav-links a { font-size: 13px; font-weight: 500; color: var(--txt2); }
.nav-links a:hover, .nav-links a.active { color: var(--txt); }

.nav-links .nav-cta a,
.nav-links .nav-cta button {
  background: var(--cyan);
  color: #000;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all 0.2s;
  box-shadow: 0 0 20px var(--cyan-glow);
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-links .nav-cta a:hover,
.nav-links .nav-cta button:hover {
  background: #fff;
  box-shadow: 0 0 28px rgba(255,255,255,0.15);
  color: #000;
}

.nav-spacer { flex: 1; }

/* Hide Moonbase floating toolbar — we use our own nav integration */
.moonbase\:toolbar { display: none !important; }

/* Moonbase nav elements */
.nav-btn-account {
  background: none;
  border: 1px solid var(--border2);
  color: var(--txt2);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.nav-btn-account:hover { border-color: var(--cyan); color: var(--cyan); }

.nav-btn-cart {
  background: none;
  border: none;
  color: var(--txt2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.nav-btn-cart:hover { color: var(--cyan); }
.nav-cart-count {
  background: var(--cyan);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.nav-btn-buy {
  background: var(--cyan);
  color: #000;
  padding: 8px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  transition: all 0.2s;
  box-shadow: 0 0 20px var(--cyan-glow);
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-btn-buy:hover { background: #fff; box-shadow: 0 0 28px rgba(255,255,255,0.15); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--txt); transition: 0.2s; }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 32px var(--cyan-glow), 0 4px 16px rgba(0,0,0,0.4);
}
.btn-primary:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 0 40px rgba(255,255,255,0.2), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--border2);
}
.btn-secondary:hover {
  color: var(--txt);
  border-color: var(--txt3);
  background: rgba(255,255,255,0.03);
}

.btn-lg { padding: 15px 36px; font-size: 15px; }

/* ─── HERO ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 72px 0 0;
  overflow: hidden;
}

/* Background gradient orbs */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.09;
  mix-blend-mode: screen;
  filter: saturate(1.4);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}

.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(112,216,232,0.25) 0%, transparent 70%);
  top: -200px; left: -100px;
  animation: orb-float-1 12s ease-in-out infinite;
}

.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(192,96,236,0.2) 0%, transparent 70%);
  top: 0; right: -150px;
  animation: orb-float-2 15s ease-in-out infinite;
}

.orb-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,100,255,0.12) 0%, transparent 70%);
  bottom: 0; left: 40%;
  animation: orb-float-3 18s ease-in-out infinite;
}

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(40px, 30px) scale(1.05); }
  66%       { transform: translate(-20px, 50px) scale(0.97); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(20px, -30px); }
}

/* Grid overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 70%, transparent 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-bottom: 48px;
}

.hero-label { margin-bottom: 22px; }

.hero h1 {
  margin-bottom: 28px;
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1.04;
}

.hero h1 .accent {
  background: linear-gradient(90deg, var(--cyan) 0%, #7EBAEA 50%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  white-space: normal;
}

.hero-sub {
  font-size: 18px;
  color: var(--txt2);
  max-width: 760px;
  margin-bottom: 28px;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ─── Plugin screenshot mockup ───────────────────────────────────────── */
.plugin-mockup-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 140px;
}

.plugin-mockup-wrap::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 120%;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(112,216,232,0.16) 0%, rgba(192,96,236,0.08) 45%, transparent 75%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

.plugin-mockup-inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(112,216,232,0.22);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 60px 120px rgba(0,0,0,0.65),
    0 0 120px rgba(112,216,232,0.12),
    0 0 240px rgba(192,96,236,0.08);
  transform: perspective(1200px) rotateX(3deg);
  transition: transform 0.6s cubic-bezier(.16,1,.3,1), box-shadow 0.6s;
}

.plugin-mockup-inner:hover {
  transform: perspective(1200px) rotateX(0deg) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(112,216,232,0.3),
    0 70px 140px rgba(0,0,0,0.7),
    0 0 140px rgba(112,216,232,0.16),
    0 0 280px rgba(192,96,236,0.1);
}

.plugin-mockup-inner img {
  width: 100%;
  display: block;
}

/* Top bar above mockup */
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #0a0e1a;
  border-bottom: 1px solid var(--border);
}

.mockup-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.mockup-dot:nth-child(1) { background: #ff5f57; }
.mockup-dot:nth-child(2) { background: #ffbd2e; }
.mockup-dot:nth-child(3) { background: #28c840; }

.mockup-title {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--txt3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}

/* Glow line below hero */
.hero-glow-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  opacity: 0.4;
}

/* ─── Waveform decoration ────────────────────────────────────────────── */
.waveform-deco {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 40px;
  margin-bottom: 32px;
}

.waveform-deco span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--cyan);
  opacity: 0.7;
  animation: wave-bar 1.4s ease-in-out infinite;
}

.waveform-deco span:nth-child(1)  { height: 20%; animation-delay: 0.0s; }
.waveform-deco span:nth-child(2)  { height: 45%; animation-delay: 0.1s; }
.waveform-deco span:nth-child(3)  { height: 70%; animation-delay: 0.2s; }
.waveform-deco span:nth-child(4)  { height: 90%; animation-delay: 0.3s; }
.waveform-deco span:nth-child(5)  { height: 100%; animation-delay: 0.2s; background: var(--cyan); }
.waveform-deco span:nth-child(6)  { height: 80%; animation-delay: 0.1s; }
.waveform-deco span:nth-child(7)  { height: 55%; animation-delay: 0.2s; }
.waveform-deco span:nth-child(8)  { height: 35%; animation-delay: 0.3s; }
.waveform-deco span:nth-child(9)  { height: 20%; animation-delay: 0.4s; }
.waveform-deco span:nth-child(10) { height: 10%; animation-delay: 0.5s; }
.waveform-deco span:nth-child(11) { height: 25%; animation-delay: 0.4s; background: var(--purple); opacity: 0.5; }
.waveform-deco span:nth-child(12) { height: 50%; animation-delay: 0.3s; background: var(--purple); opacity: 0.5; }
.waveform-deco span:nth-child(13) { height: 75%; animation-delay: 0.2s; background: var(--purple); opacity: 0.5; }
.waveform-deco span:nth-child(14) { height: 95%; animation-delay: 0.1s; background: var(--purple); opacity: 0.5; }
.waveform-deco span:nth-child(15) { height: 60%; animation-delay: 0.2s; background: var(--purple); opacity: 0.5; }

@keyframes wave-bar {
  0%, 100% { transform: scaleY(1);   opacity: 0.6; }
  50%       { transform: scaleY(0.3); opacity: 0.3; }
}

/* ─── Section header ─────────────────────────────────────────────────── */
.section-header { margin-bottom: 56px; }
.section-header .label { margin-bottom: 16px; }
.section-header h2 { margin-top: 0; }
.section-intro { margin-top: 14px; max-width: 520px; font-size: 16px; color: var(--txt2); }

/* ─── Divider line ───────────────────────────────────────────────────── */
.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
}

/* ─── Benefits grid ──────────────────────────────────────────────────── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.benefit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.benefit-card:hover {
  border-color: var(--border2);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(112,216,232,0.08);
}

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

.benefit-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--cyan-glow);
  border: 1px solid rgba(112,216,232,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--cyan);
}

.benefit-card h3 { margin-bottom: 10px; font-size: 1rem; }
.benefit-card p  { font-size: 14px; line-height: 1.6; }

/* ─── Use cases ──────────────────────────────────────────────────────── */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.use-case-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.25s;
  cursor: default;
}

.use-case-item:hover {
  background: var(--surface2);
  border-color: rgba(112,216,232,0.2);
  transform: translateX(4px);
}

.uc-num {
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  min-width: 20px;
}

.use-case-item span:last-child { font-size: 14px; color: var(--txt); }

/* ─── Workflow steps ─────────────────────────────────────────────────── */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

/* Progress connector line */
.workflow-steps::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(25% / 2);
  right: calc(25% / 2);
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: 0.25;
  z-index: 1;
}

.step-card {
  background: var(--surface);
  padding: 40px 28px 36px;
  border-right: 1px solid var(--border);
  position: relative;
  transition: background 0.25s;
}

.step-card:last-child { border-right: none; }
.step-card:hover { background: var(--surface2); }

.step-num-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cyan-glow);
  border: 1px solid rgba(112,216,232,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.step-card h3 { font-size: 0.95rem; margin-bottom: 10px; }
.step-card p  { font-size: 13px; line-height: 1.6; }

/* ─── Profiles ───────────────────────────────────────────────────────── */
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.profile-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s;
}

.profile-card.standard::after { background: linear-gradient(90deg, var(--cyan), transparent); }
.profile-card.precision::after { background: linear-gradient(90deg, #7EBAEA, transparent); }
.profile-card.rescue::after   { background: linear-gradient(90deg, var(--purple), transparent); }

.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.profile-card:hover::after { opacity: 1; }

.profile-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: 'JetBrains Mono', monospace;
}

.standard .profile-pill  { background: rgba(112,216,232,0.1);  color: var(--cyan);   border: 1px solid rgba(112,216,232,0.2); }
.precision .profile-pill { background: rgba(126,186,234,0.1);  color: #7EBAEA;       border: 1px solid rgba(126,186,234,0.2); }
.rescue    .profile-pill { background: rgba(192,96,236,0.1); color: var(--purple); border: 1px solid rgba(192,96,236,0.2); }

.profile-card h3 { font-size: 0.9rem; color: var(--txt); font-weight: 600; margin-bottom: 8px; }
.profile-card p  { font-size: 13px; }

/* ─── CTA section ────────────────────────────────────────────────────── */
.cta-section {
  text-align: center;
  padding: 104px 0;
  position: relative;
  overflow: hidden;
}

.cta-section .cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(112,216,232,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 { margin-bottom: 16px; }
.cta-section p  { margin-bottom: 36px; max-width: 440px; margin-left: auto; margin-right: auto; font-size: 16px; }

/* ─── Feature blocks ─────────────────────────────────────────────────── */
.feature-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.feature-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color 0.25s, transform 0.25s;
}

.feature-block:hover {
  border-color: rgba(112,216,232,0.15);
  transform: translateY(-2px);
}

.fb-icon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 16px;
  display: block;
}

.feature-block h3 { font-size: 0.95rem; margin-bottom: 10px; }
.feature-block p  { font-size: 14px; }

/* ─── Check / Cross lists ────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.col-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt3); margin-bottom: 20px;
  font-family: 'JetBrains Mono', monospace;
}

.check-list, .cross-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }

.check-list li, .cross-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: var(--txt2); line-height: 1.5;
}

.check-list li::before { content: '✓'; color: var(--cyan); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.cross-list li::before { content: '×'; color: var(--txt3); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

/* ─── Workflow detail (workflow page) ────────────────────────────────── */
.workflow-detail {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.workflow-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s;
}
.workflow-row:last-child { border-bottom: none; }
.workflow-row:hover { background: rgba(255,255,255,0.01); }

.wf-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 32px 16px;
}

.wf-num .step-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.wf-num .step-line-n {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  font-family: 'JetBrains Mono', monospace;
}

.wf-content { padding: 36px 44px; }
.wf-content h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--txt2); font-weight: 700; margin-bottom: 12px; }
.wf-content p  { font-size: 16px; color: var(--txt); line-height: 1.65; }

/* ─── Why block ──────────────────────────────────────────────────────── */
.why-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
}
.why-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--cyan), var(--purple));
}
.why-block p { font-size: 16px; margin-bottom: 12px; color: var(--txt); }
.why-block p:last-child { margin-bottom: 0; }

/* ─── FAQ ────────────────────────────────────────────────────────────── */
.faq-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

details {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.2s;
}
details:last-child { border-bottom: none; }
details[open] { background: var(--surface2); }

summary {
  padding: 22px 28px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.15s;
  color: var(--txt);
}
summary:hover { color: var(--cyan); }
summary::-webkit-details-marker { display: none; }

.faq-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--txt3);
  transition: all 0.25s;
}
details[open] .faq-icon { background: var(--cyan-glow); border-color: rgba(112,216,232,0.25); color: var(--cyan); transform: rotate(45deg); }

.faq-answer {
  padding: 0 28px 24px 28px;
  font-size: 14px;
  color: var(--txt2);
  line-height: 1.7;
  animation: faq-open 0.25s ease;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Form ───────────────────────────────────────────────────────────── */
.form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
}

.form-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  opacity: 0.3;
}

.form-intro { margin-bottom: 32px; font-size: 14px; color: var(--txt2); }

.field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 0; }
.field.full { grid-column: 1 / -1; }

label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt2);
  font-family: 'JetBrains Mono', monospace;
}

input, select, textarea {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--txt);
  font-family: inherit;
  font-size: 14px;
  padding: 11px 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan-dim);
  box-shadow: 0 0 0 3px var(--cyan-glow2);
}
select option { background: #111; }
textarea { resize: vertical; min-height: 100px; }

.form-submit { margin-top: 28px; }
.form-note { margin-top: 14px; font-size: 12px; color: var(--txt3); }

/* ─── Beta badges ────────────────────────────────────────────────────── */
.who-list { display: flex; flex-wrap: wrap; gap: 10px; }

.badge {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 100px;
  padding: 7px 18px;
  font-size: 13px;
  color: var(--txt2);
  transition: all 0.2s;
}
.badge:hover {
  border-color: rgba(112,216,232,0.25);
  color: var(--txt);
  background: var(--surface2);
}

/* ─── Plugin format badges ───────────────────────────────────────────── */
.format-badges {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.format-badge {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--txt2);
  transition: all 0.25s;
}

.format-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.format-badge.aax        { color: var(--cyan);   background: rgba(112,216,232,0.08);  border-color: rgba(112,216,232,0.3); }
.format-badge.vst3       { color: #7EBAEA;       background: rgba(126,186,234,0.08);  border-color: rgba(126,186,234,0.3); }
.format-badge.standalone { color: var(--purple); background: rgba(192,96,236,0.08); border-color: rgba(192,96,236,0.3); }

/* ─── Contact grid ───────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; overflow-wrap: break-word; word-break: break-word; }
.contact-grid > * { min-width: 0; }

.contact-info p { font-size: 15px; margin-bottom: 14px; }

.contact-email-block {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  position: relative;
  overflow: hidden;
}
.contact-email-block::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cyan);
  border-radius: 0 2px 2px 0;
}
.contact-email-block .label { margin-bottom: 10px; }
.contact-email-block a { font-size: 16px; font-weight: 600; color: var(--txt); }
.contact-email-block a:hover { color: var(--cyan); }

/* ─── Page hero ──────────────────────────────────────────────────────── */
.page-hero {
  padding: 132px 0 88px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 60% 90% at 0% 30%, rgba(112,216,232,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 100% 80%, rgba(192,96,236,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.10;
  mix-blend-mode: screen;
  filter: saturate(1.4);
  pointer-events: none;
}
.page-hero .label { margin-bottom: 20px; }
.page-hero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.06;
}
.page-hero p { font-size: 18px; max-width: 600px; color: var(--txt2); }

/* ─── Plugin feature highlight (product page) ────────────────────────── */
.plugin-preview {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(112,216,232,0.15);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 60px rgba(112,216,232,0.06);
}

.plugin-preview img { width: 100%; display: block; }

/* ─── Stats strip ────────────────────────────────────────────────────── */
.stats-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 40px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.stat-item {
  text-align: center;
  padding: 8px 24px;
  border-right: 1px solid var(--border);
}
.stat-item:last-child { border-right: none; }

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--cyan), #7EBAEA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 12px;
  color: var(--txt3);
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.footer-brand .brand-product { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; color: var(--txt); margin-bottom: 6px; }
.footer-brand .brand-name-sm  { font-size: 10px; color: var(--txt3); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; }
.footer-brand .brand-tagline  { font-size: 13px; color: var(--txt3); }

.footer-nav { display: flex; gap: 32px; }
.footer-nav a { font-size: 13px; color: var(--txt3); transition: color 0.15s; }
.footer-nav a:hover { color: var(--txt); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-copy { font-size: 12px; color: var(--txt3); }
.footer-tag  { font-size: 12px; color: var(--txt3); font-family: 'JetBrains Mono', monospace; }

.footer-legal {
  margin-top: 16px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--txt3);
  opacity: 0.7;
  text-align: center;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .benefits-grid  { grid-template-columns: 1fr; }
  .workflow-steps { grid-template-columns: 1fr 1fr; }
  .profiles-grid  { grid-template-columns: 1fr; }
  .feature-blocks { grid-template-columns: 1fr; }
  .two-col        { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid   { grid-template-columns: 1fr; gap: 40px; }
  .field-group    { grid-template-columns: 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: 1fr 1fr; }
  .footer-top     { grid-template-columns: 1fr; }
  .footer-nav     { flex-wrap: wrap; gap: 16px; }
  .plugin-mockup-inner { transform: none; }
  .plugin-mockup-inner:hover { transform: none; }
}

/* Global overflow protection */
p, h1, h2, h3, li, a { overflow-wrap: break-word; word-break: break-word; }

/* Nav collapses to hamburger early enough for the wordiest language (DE)
   to never clip. Above this the full horizontal nav is shown.
   1270 px since the brand is stacked and the menu gained Downloads and About
   (Oct 2026); a 1280 px laptop still gets the full menu, tightened below.
   it needs about 1190 px in French;
   a 1280 px laptop must keep the menu open on a one-page site. */
@media (max-width: 1270px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 62px; left: 0; right: 0; background: rgba(5,7,15,0.98); border-bottom: 1px solid var(--border); padding: 20px 28px; gap: 18px; backdrop-filter: blur(20px); }
  .nav-links.open { display: flex; }
  .nav-links .nav-spacer { display: none; }
  .nav-lang-item { margin-top: 4px; }
  .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
  section { padding: 72px 0; }
  .workflow-steps { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: 1fr; }
  .workflow-row   { grid-template-columns: 60px 1fr; }
  .wf-content { padding: 24px 20px; }
  .form-wrap { padding: 32px 24px; }
  .hero { padding: 44px 0 0; }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.1; }
  .page-hero { padding: 96px 0 56px; }
  .page-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); line-height: 1.1; }
  .hero-content { padding-bottom: 56px; }
  .plugin-mockup-wrap { padding: 0 0 80px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; justify-content: center; }
}

/* ─── Video embed ────────────────────────────────────────────────────── */
.video-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(112,216,232,0.2);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 40px 80px rgba(0,0,0,0.6),
    0 0 80px rgba(112,216,232,0.08);
}

.video-inner {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-inner iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ─── Nav trial button ───────────────────────────────────────────────── */
.nav-btn-trial {
  background: transparent !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(112,216,232,0.35) !important;
  padding: 7px 18px !important;
  border-radius: var(--radius) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: all 0.2s !important;
}

.nav-btn-trial:hover {
  background: rgba(112,216,232,0.08) !important;
  border-color: var(--cyan) !important;
  color: var(--cyan) !important;
}

/* ─── Pricing page ───────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card.featured {
  border-color: rgba(112,216,232,0.35);
  box-shadow: 0 0 0 1px rgba(112,216,232,0.1), 0 24px 60px rgba(0,0,0,0.4);
}

.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), #7EBAEA, var(--purple));
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.pricing-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 20px;
  display: block;
}

.pricing-card.featured .pricing-label { color: var(--cyan); }
.pricing-card.trial .pricing-label    { color: var(--txt3); }

.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--txt);
  line-height: 1;
  margin-bottom: 6px;
}

.pricing-price sup {
  font-size: 1.4rem;
  vertical-align: super;
  font-weight: 700;
  letter-spacing: 0;
}

.pricing-price-note {
  font-size: 13px;
  color: var(--txt3);
  margin-bottom: 32px;
  font-family: 'JetBrains Mono', monospace;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 36px;
}

.pricing-features li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--txt2);
  line-height: 1.5;
}

.pricing-features li::before {
  content: '✓';
  color: var(--cyan);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card.trial .pricing-features li::before {
  content: '·';
  color: var(--txt3);
  font-size: 18px;
  line-height: 1.1;
}

.pricing-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.pricing-btn-primary {
  background: var(--cyan);
  color: #000;
  box-shadow: 0 0 32px var(--cyan-glow), 0 4px 16px rgba(0,0,0,0.4);
}
.pricing-btn-primary:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 0 40px rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.pricing-btn-secondary {
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--border2);
}
.pricing-btn-secondary:hover {
  color: var(--txt);
  border-color: var(--txt3);
  background: rgba(255,255,255,0.03);
}

.pricing-shop-note {
  margin-top: 48px;
  text-align: center;
  font-size: 13px;
  color: var(--txt3);
}

.pricing-shop-note a { color: var(--txt3); text-decoration: underline; }
.pricing-shop-note a:hover { color: var(--txt2); }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .video-inner  { padding-bottom: 56.25%; }
}

/* ─── Gallery figures & captions ─────────────────────────────────────── */
.shot { margin: 0 0 28px; }

.shot .plugin-preview {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.shot:hover .plugin-preview {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  border-color: rgba(112,216,232,0.25);
}

.shot .plugin-preview img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - 6px);
}

.shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--txt2);
  line-height: 1.6;
  padding: 0 4px;
}

.shot figcaption .profile-pill { margin-bottom: 10px; }
.shot figcaption h3 { font-size: 0.9rem; color: var(--txt); font-weight: 600; margin-bottom: 6px; }
.shot figcaption p  { font-size: 13px; color: var(--txt2); margin: 0; }

/* Profiles cards merged into gallery: frame the caption like a card */
.shot-grid-3 .shot figcaption {
  margin-top: 16px;
  padding: 20px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.shot-grid-3 .shot:hover figcaption {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.shot-grid-3 .shot figcaption::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  opacity: 0.7;
}

.shot-grid-3 .shot.standard figcaption::after  { background: linear-gradient(90deg, var(--cyan), transparent); }
.shot-grid-3 .shot.precision figcaption::after { background: linear-gradient(90deg, #7EBAEA, transparent); }
.shot-grid-3 .shot.rescue figcaption::after    { background: linear-gradient(90deg, var(--purple), transparent); }

.shot-step {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(112,216,232,0.07);
  border: 1px solid rgba(112,216,232,0.2);
  border-radius: 4px;
  padding: 3px 9px;
  margin-right: 10px;
  vertical-align: middle;
}

.shot-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.shot-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.shot-grid-2 .shot,
.shot-grid-3 .shot { margin-bottom: 0; }

@media (max-width: 768px) {
  .shot-grid-2,
  .shot-grid-3 { grid-template-columns: 1fr !important; }
}

/* ─── YouTube facade ─────────────────────────────────────────────────── */
.yt-facade {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0 0 56.25%;
  background: #000 center/cover no-repeat;
  overflow: hidden;
  border: 0;
  appearance: none;
  background-color: #000;
  cursor: pointer;
}

.yt-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  transition: background 0.25s;
}

.yt-facade:hover::after { background: rgba(0,0,0,0.05); }

.yt-facade:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.yt-facade.is-playing {
  cursor: default;
}

.yt-facade.is-playing::after {
  display: none;
}

.yt-facade .yt-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 58px;
  background: rgba(5,7,15,0.85);
  border: 1px solid rgba(112,216,232,0.4);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.25s;
  box-shadow: 0 0 40px rgba(112,216,232,0.15);
}

.yt-facade:hover .yt-play {
  background: var(--cyan);
  border-color: var(--cyan);
  transform: translate(-50%, -50%) scale(1.06);
}

.yt-facade .yt-play svg { fill: var(--cyan); transition: fill 0.25s; margin-left: 3px; }
.yt-facade:hover .yt-play svg { fill: #000; }

.yt-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 3;
}

.video-fallback {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.video-fallback a { color: var(--cyan); }

/* ─── Legal pages (Privacy / Refund / Terms) ────────────────────────── */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0 104px;
}
.legal-content .legal-notice {
  font-size: 13px;
  color: var(--txt2);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 40px;
}
.legal-content .legal-updated {
  font-size: 13px;
  color: var(--txt2);
  margin-bottom: 48px;
}
.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 48px;
  margin-bottom: 16px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  color: var(--txt);
}
.legal-content p, .legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--txt2);
  margin-bottom: 14px;
}
.legal-content ul { padding-left: 20px; margin-bottom: 14px; }
.legal-content a { color: var(--cyan); }
.legal-content strong { color: var(--txt); font-weight: 600; }
.legal-lang-switch {
  font-size: 13px;
  color: var(--txt2);
  margin-bottom: 8px;
}
.legal-lang-switch a { color: var(--cyan); }
.legal-lang-switch .current { color: var(--txt); font-weight: 600; }

/* ─── Language switcher (injected in nav by i18n.js) ─────────────────── */
.nav-lang-item { position: relative; display: flex; align-items: center; }
.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--txt2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.nav-lang-btn:hover { color: var(--txt); border-color: var(--cyan); }
.nav-lang-globe { flex-shrink: 0; }
.nav-lang-caret { opacity: 0.7; flex-shrink: 0; }

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 156px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  z-index: 200;
}
.nav-lang-menu li { list-style: none; }
.nav-lang-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--txt2);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-lang-opt:hover { background: var(--bg); color: var(--txt); }
.nav-lang-opt.current { color: var(--cyan); font-weight: 600; }

/* ─── CJK font stack when Chinese is active ─────────────────────────────
   Inter covers Latin (keeps the brand look); CJK glyphs fall through to
   the platform's system Chinese font — no multi-MB webfont download. */
:root.lang-zh body,
:root.lang-zh button,
:root.lang-zh input,
:root.lang-zh textarea,
:root.lang-zh select {
  font-family: 'Inter', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Noto Sans CJK SC', sans-serif;
}
/* Chinese text doesn't need the wide Latin letter-spacing on labels */
:root.lang-zh .label,
:root.lang-zh .nav-lang-btn { letter-spacing: 0.02em; }

/* Language menu: on mobile (hamburger nav) center it under the trigger */
@media (max-width: 1270px) {
  .nav-lang-item { justify-content: center; }
  .nav-lang-menu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* Accessible navigation and readable fallbacks, without changing storefront styles. */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 200; padding: 10px 16px; background: var(--surface); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
main, section[id] { scroll-margin-top: 84px; }
.nav-toggle { flex-shrink: 0; margin-left: auto; }
.hero-compat { margin-top: 20px; font-size: 13px; }
.hero-compat a { text-decoration: underline; text-underline-offset: 3px; }
.profiles-note { margin-top: 24px; max-width: 720px; }
.workflow-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.workflow-paths .why-block { margin: 0; }
.workflow-paths h2 { font-size: 1.2rem; margin-bottom: 16px; }
.manual-links { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin-top: 22px; }
.manual-links a { display: block; border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px 16px; }
.manual-links a:hover { border-color: var(--cyan); }
.support-help { margin-top: 28px; }
.support-help h2 { font-size: 1.2rem; margin-bottom: 12px; }
.store-fallback { position: fixed; z-index: 110; bottom: 20px; left: 20px; right: 20px; max-width: 560px; padding: 22px; border: 1px solid var(--cyan); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 12px 40px #0009; }
.store-fallback p { margin-bottom: 12px; }
.store-fallback a { display: inline-block; margin-right: 20px; text-decoration: underline; }
.store-fallback button { background: transparent; border: 1px solid var(--border2); padding: 6px 12px; color: var(--txt); cursor: pointer; font: inherit; }
a.pricing-btn { display: flex; align-items: center; justify-content: center; }
@media (max-width: 1270px) {
  .nav-links { max-height: calc(100dvh - 62px); overflow-y: auto; }
}
@media (max-width: 768px) {
  .workflow-paths { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 12px; }
  .nav-brand { flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; line-height: 1.3; }
  .nav-brand .brand-name { font-size: 9px; }
  .nav-brand .brand-product { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, .orb, .waveform-deco span, .faq-answer { animation: none !important; }
  body::after, .orb, .plugin-mockup-inner, .reveal-enabled [data-anim] { transform: none !important; }
  .reveal-enabled [data-anim] { opacity: 1; transition: none; }
  .waveform-deco span, .plugin-mockup-inner, .skip-link { transition: none !important; }
}

.pricing-activation { font-size: 13px; margin: 0 0 24px; }
.footer-nav { flex-wrap: wrap; gap: 16px 24px; }

/* No-JS visitors keep a visible, usable navigation instead of a dead toggle. */
@media (max-width: 1270px) {
  html:not(.nav-ready) .nav-inner { height: auto; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  html:not(.nav-ready) .nav-links { display: flex; position: static; flex-basis: 100%; max-height: none; }
  html:not(.nav-ready) .nav-toggle { display: none; }
}

/* ─── About page (Frédéric) ──────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.about-grid > * { min-width: 0; }

.about-portrait,
.about-portrait-slot {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: block;
}
.about-portrait { height: auto; object-fit: cover; }

/* Visible stand-in until the real portrait is supplied. Deliberately plain:
   it should read as unfinished, never as a design choice. */
.about-portrait-slot {
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border-style: dashed;
  border-color: var(--border2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--txt2);
}
.about-portrait-slot span { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.about-portrait-slot small { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--txt3); }

.about-lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--txt); line-height: 1.55; margin-bottom: 16px; letter-spacing: -0.01em; }
.about-grid p { font-size: 15px; color: var(--txt2); line-height: 1.7; margin-bottom: 14px; }

.about-todo {
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px dashed var(--border2);
  border-left: 2px solid var(--cyan-dim);
  border-radius: var(--radius);
  background: var(--surface);
}
.about-todo p { margin: 0; font-size: 14px; }
.about-todo strong { color: var(--cyan); }

.about-prose { max-width: 720px; margin: 0 auto; }
.about-prose p { font-size: 16px; color: var(--txt2); line-height: 1.75; }

/* ─── Professional Sound Alliance: a supporter seal, not a certification ── */
.psa-block {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.psa-seal { flex: none; width: 76px; height: auto; }
.psa-text { min-width: 0; }
.psa-text h2 { font-size: 1.05rem; margin-bottom: 8px; letter-spacing: -0.01em; }
.psa-text p { font-size: 14px; color: var(--txt2); line-height: 1.65; margin-bottom: 8px; }
.psa-text a { color: var(--cyan); }
.psa-note { font-size: 12.5px !important; color: var(--txt3) !important; margin-bottom: 0 !important; }

/* Compact seal shown in the site footer. */
.footer-psa { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.footer-psa img { width: 34px; height: auto; opacity: 0.75; transition: opacity 0.2s; }
.footer-psa:hover img { opacity: 1; }
.footer-psa span { font-size: 11px; color: var(--txt3); line-height: 1.4; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-portrait, .about-portrait-slot { max-width: 360px; }
  .psa-block { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOT-MARQUE VOXSPLIT PRO
   Repris trait pour trait de l'interface du plugin : deux barres inclinees
   cyan et magenta (les deux voix), puis VOX blanc / SPLIT magenta / PRO
   blanc. Valeurs relevees au pixel dans assets/plugin-screenshot.png.
══════════════════════════════════════════════════════════════════════ */
:root {
  --wm-bar-a: #70D8E8;   /* barre gauche, cyan */
  --wm-bar-b: #C060EC;   /* barre droite, magenta */
  --wm-split: #C464F0;   /* le mot SPLIT */
  --wm-ink:   #F2F3F3;   /* le blanc de VOX et PRO */
}

/* align-items: baseline pose le bas des barres sur la ligne de base du texte. */
.wordmark { display: inline-flex; align-items: baseline; gap: 11px; text-decoration: none; }
.wm-bars  { display: inline-flex; gap: 3px; flex: none; }
.wm-bars i {
  /* 0.74em = hauteur des capitales d'Inter : les barres font exactement
     la hauteur de VOXSPLIT, ni plus ni moins. */
  display: block; width: 3px; height: 0.74em;
  transform: skewX(13deg);        /* l'inclinaison des barres du plugin : le bas penche vers la droite */
  border-radius: 1px;
}
.wm-bars i:first-child { background: var(--wm-bar-a); }
.wm-bars i:last-child  { background: var(--wm-bar-b); }

.wm-text {
  font-weight: 800; letter-spacing: -0.005em; line-height: 1;
  color: var(--wm-ink); white-space: nowrap;
}
.wm-text .wm-split { color: var(--wm-split); }
.wm-text .wm-pro   { font-weight: 700; }

/* Dans la navigation : le mot-marque remplace le texte brut. */
.nav-brand .wordmark { font-size: 1.05rem; }
.nav-brand .brand-product { display: none; }

/* En grand dans le hero. display:flex et non inline-flex, sinon il se
   place sur la ligne de l'etiquette qui le precede. */
.wordmark-lg {
  display: flex; gap: 18px;
  /* Le titre suit immediatement : sans marge basse les deux se touchent. */
  margin: 6px 0 22px;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
}
.wordmark-lg .wm-bars i { width: 6px; border-radius: 2px; }
.wordmark-tagline { color: var(--txt2); font-size: 0.95rem; margin: 12px 0 26px; letter-spacing: 0.01em; }

@media (max-width: 480px) {
  .wordmark-lg { gap: 12px; }
  .wordmark-lg .wm-bars i { width: 4px; }
}

/* Marque empilee a toutes les tailles : "Limited Edition Audio" au-dessus du
   mot-marque. Le bloc passait de 297 px a ~155 px, ce qui laisse le menu
   ouvert sur les portables au lieu de le cacher derriere l'icone. */
.nav-brand { flex-direction: column; align-items: flex-start; gap: 2px; flex-shrink: 0; line-height: 1.2; }
.nav-brand .brand-name { font-size: 9.5px; }

/* Entre le menu replie (1270 px) et 1400 px, le menu complet compte huit
   liens plus les boutons de la boutique : on le resserre pour qu'il tienne
   sur un portable de 1280 px dans toutes les langues. */
@media (min-width: 1271px) and (max-width: 1400px) {
  nav .container.nav-inner { padding-left: 20px; padding-right: 20px; }
  .nav-links { gap: 10px; }
  .nav-btn-trial, .nav-btn-buy, .nav-btn-account { padding-left: 13px; padding-right: 13px; }
}