/* =============================================================================
   RDV Assistant Manager — Coming Soon
   Light premium SaaS + soft glassmorphism. No framework, no build step.

   Order: tokens → reset → primitives → layout → sections → responsive → a11y.
   Every animation is defined once and switched off wholesale by the
   prefers-reduced-motion block at the very bottom.
   ========================================================================== */

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --primary-blue:    #4F6FFF;
  --primary-cyan:    #00CFE8;
  --primary-purple:  #7B61FF;
  --primary-magenta: #C000D9;
  --success-green:   #00B84D;

  --background:   #F7F9FC;
  --surface:      #FFFFFF;
  --surface-soft: #EEF4FA;

  --text-primary:   #111827;
  --text-secondary: #667085;

  /* Glass, tuned so body text on it still clears WCAG AA. */
  --glass-bg:     rgba(255, 255, 255, .68);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -12px rgba(17, 24, 39, .12);
  --glass-shadow-hover: 0 2px 4px rgba(17, 24, 39, .05), 0 20px 44px -14px rgba(79, 111, 255, .22);

  --grad-brand: linear-gradient(100deg, var(--primary-blue), var(--primary-cyan) 34%, var(--primary-purple) 66%, var(--primary-magenta));

  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shell:  1180px;
  --ease:   cubic-bezier(.22, .61, .36, 1);

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

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

html {
  /* The decorative blobs are wider than the viewport on purpose; without this
     the page scrolls sideways on mobile, which the spec forbids outright. */
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
ul, ol   { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

a { color: var(--primary-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input { font: inherit; color: inherit; }

/* Focus is visible on every interactive element, keyboard-only so a mouse
   click does not paint a ring. */
:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary);
  box-shadow: var(--glass-shadow); font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ── Background ────────────────────────────────────────────────────────── */
.bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}

.blob {
  position: absolute;
  width: 46vw; height: 46vw;
  min-width: 320px; min-height: 320px;
  border-radius: 50%;
  /* Very low opacity + heavy blur: brand colour that tints the page without
     ever competing with the text. */
  opacity: .10;
  filter: blur(90px);
  will-change: transform;
}
.blob--blue    { top: -14vw;  left: -10vw;  background: var(--primary-blue);    animation: drift-a 26s var(--ease) infinite alternate; }
.blob--cyan    { top: 6vw;    right: -14vw; background: var(--primary-cyan);    animation: drift-b 32s var(--ease) infinite alternate; }
.blob--purple  { bottom: -18vw; left: 18vw; background: var(--primary-purple);  animation: drift-c 30s var(--ease) infinite alternate; }
.blob--magenta { bottom: 4vw; right: 6vw;   background: var(--primary-magenta); opacity: .07; animation: drift-a 36s var(--ease) infinite alternate-reverse; }

@keyframes drift-a { to { transform: translate3d(6vw, 5vw, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-7vw, 7vw, 0) scale(1.08); } }
@keyframes drift-c { to { transform: translate3d(5vw, -6vw, 0) scale(1.14); } }

/* Faint grid, masked to fade out before it reaches the edges. */
.grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(17, 24, 39, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 24, 39, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 22%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 22%, #000 35%, transparent 100%);
}

/* ── Primitives ────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}

.grad {
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-slide 14s linear infinite;
}
@keyframes grad-slide { to { background-position: 220% 0; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--radius-pill);
  font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn--primary {
  color: #fff;
  background: linear-gradient(100deg, var(--primary-blue), var(--primary-purple) 55%, var(--primary-magenta));
  box-shadow: 0 8px 22px -8px rgba(79, 111, 255, .55);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(123, 97, 255, .6); filter: saturate(1.06); }
.btn--primary:active { transform: translateY(0); }
.btn--primary:hover { text-decoration: none; }
.btn--lg { min-height: 54px; padding: 0 32px; font-size: 1rem; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ── Header ────────────────────────────────────────────────────────────── */
.header { padding: 22px 0 6px; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand:hover { text-decoration: none; }
/* The mark is square; the wordmark beside it is text, not part of the image. */
.brand__logo { height: 46px; width: 46px; }

.brand__name { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name b {
  font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em;
  background: var(--grad-brand);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: grad-slide 14s linear infinite;
}
.brand__name i {
  font-style: normal;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-secondary);
}

.status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-secondary);
}
.status__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success-green);
  box-shadow: 0 0 0 3px rgba(0, 184, 77, .16);
}
/* The halo pulses, the dot itself does not move — a jumping dot reads as a
   glitch rather than a live indicator. */
.status__dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; background: var(--success-green);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 56px;
  padding: 52px 24px 84px;
}

/* See .unit--sep: a grid item must be allowed to shrink, or its content dictates
   the track width and the layout silently overflows. */
.hero__copy, .visual { min-width: 0; }

.eyebrow { margin-bottom: 22px; }
.eyebrow__inner {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-purple);
  background: var(--surface);
  /* Gradient border without a wrapper element: the padding-box paints the fill,
     the border-box paints the gradient underneath. */
  border: 1px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)), var(--grad-brand);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 6px 18px -10px rgba(123, 97, 255, .5);
}

.hero__title {
  font-size: clamp(2.15rem, 5.4vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero__lead {
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.09rem);
  color: var(--text-secondary);
}

.almost { margin-top: 30px; }
.almost__title {
  font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em;
  margin-bottom: 5px;
}
.almost__text { color: var(--text-secondary); font-size: .96rem; max-width: 50ch; }

/* ── Countdown ─────────────────────────────────────────────────────────── */
.countdown { margin-top: 28px; padding: 20px 22px; }
.countdown__list { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }

.unit { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
/*
 * The ":" separators are list items too, so they inherited the 62px min-width of a
 * real unit — 3 x 62px of invisible padding. That is what pushed the countdown's
 * min-content to 337px and, through the grid, dragged the whole hero column past
 * the viewport at 414px and below: the text was clipped by `overflow-x: hidden`
 * rather than wrapped, so nothing scrolled and the breakage looked like a font
 * problem. A separator is punctuation; it gets no minimum.
 */
.unit--sep { min-width: 0; }
.unit__value {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
  font-weight: 800; line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  /* Tabular figures alone are not enough at this weight: a fixed min-width
     stops the row from twitching every second as digits change. */
  min-width: 2.1ch; text-align: center;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.unit__label {
  margin-top: 4px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-secondary);
}
.unit__sep {
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700;
  line-height: 1.2; color: rgba(102, 112, 133, .38);
}
.countdown__live {
  font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  text-align: center;
}

/* ── Notification form ─────────────────────────────────────────────────── */
.notify { margin-top: 30px; }
.notify__pitch { font-weight: 600; font-size: .95rem; margin-bottom: 11px; }

.notify__form { display: flex; gap: 10px; flex-wrap: wrap; }
.field { flex: 1 1 260px; min-width: 0; }
.field__input {
  width: 100%; min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(17, 24, 39, .12);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field__input::placeholder { color: rgba(102, 112, 133, .8); }
.field__input:hover { border-color: rgba(79, 111, 255, .35); }
.field__input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(79, 111, 255, .14);
  outline: none;
}
.field__input[aria-invalid="true"] {
  border-color: #D92D20;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, .12);
}

.notify__feedback {
  min-height: 1.4em;              /* reserved, so a message never shifts layout */
  margin-top: 10px;
  font-size: .9rem; font-weight: 500;
}
.notify__feedback[data-state="ok"]  { color: var(--success-green); }
.notify__feedback[data-state="err"] { color: #D92D20; }

/* ── Product visual ────────────────────────────────────────────────────── */
.visual {
  position: relative;
  display: grid; place-items: center;
  min-height: 480px;
}

.visual__orb {
  position: absolute; width: 68%; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--primary-blue), var(--primary-cyan), var(--primary-purple), var(--primary-magenta), var(--primary-blue));
  opacity: .16; filter: blur(46px);
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.visual__ring {
  position: absolute; width: 62%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(79, 111, 255, .22);
  animation: spin 46s linear infinite reverse;
}

.visual__logo {
  position: relative;
  filter: drop-shadow(0 24px 44px rgba(79, 111, 255, .28));
  animation: float-logo 5.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
.visual__logo img { width: 100%; max-width: 380px; height: auto; }

/*
 * Respiration lente et régulière. `ease-in-out` symétrique (et non la courbe
 * d'entrée --ease, qui freine d'un seul côté) : sur un aller-retour en
 * `alternate`, une courbe asymétrique donne un mouvement qui « tire » vers le
 * haut au lieu de flotter. 11 s pour un cycle complet, 18 px d'amplitude.
 */
@keyframes float-logo { to { transform: translateY(-18px); } }

/* ── Generic section ───────────────────────────────────────────────────── */
.section { padding: 54px 24px; }
.section__head { text-align: center; margin-bottom: 38px; }
.section__title {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800; letter-spacing: -.025em;
  margin-bottom: 10px;
}
.section__lead { color: var(--text-secondary); max-width: 52ch; margin-inline: auto; }

/* ── Workflow ──────────────────────────────────────────────────────────── */
.flow {
  display: flex; align-items: stretch; justify-content: center;
  gap: 14px; flex-wrap: wrap;
}
.flow__step {
  flex: 1 1 240px; max-width: 320px;
  padding: 26px 24px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.flow__step:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); }

.flow__num {
  display: block; margin-bottom: 12px;
  font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.flow__name { font-size: 1.14rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.flow__text { color: var(--text-secondary); font-size: .93rem; }

.flow__arrow {
  display: grid; place-items: center;
  flex: 0 0 64px;
  color: rgba(79, 111, 255, .5);
}
/* The dash travels along the connector — the motion IS the "flows onward" idea,
   so it stays slow enough to read as a hint rather than a loading bar. */
.flow__dash { stroke-dasharray: 8 8; animation: dash 2.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }

/* ── Benefits ──────────────────────────────────────────────────────────── */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.benefit {
  padding: 24px 22px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.benefit:hover { transform: translateY(-4px); box-shadow: var(--glass-shadow-hover); }

.benefit__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 12px;
  color: var(--primary-blue);
  background: linear-gradient(140deg, rgba(79, 111, 255, .13), rgba(0, 207, 232, .13));
}
.benefit__name { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 5px; }
.benefit__text { color: var(--text-secondary); font-size: .9rem; }

/* ── Final CTA ─────────────────────────────────────────────────────────── */
.cta { padding: 20px 24px 74px; }
.cta__panel { padding: 44px 32px; text-align: center; }
.cta__title { font-size: clamp(1.5rem, 3.2vw, 2.05rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.cta__text  { color: var(--text-secondary); max-width: 46ch; margin: 0 auto 24px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(17, 24, 39, .07);
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding: 26px 0;
}
.footer__inner {
  display: flex; align-items: center; justify-content: center;
  font-size: .86rem; color: var(--text-secondary);
}
.footer__copy { text-align: center; }

/* Same signature as AI to invoice: the "omni prime" half is the link, with an
   external-link glyph and an sr-only note that it opens a new tab. */
.footer__omni {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-weight: 700; color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(102, 112, 133, .45);
  text-underline-offset: 2px;
}
.footer__omni:hover { color: var(--primary-blue); text-decoration-color: currentColor; }
.footer__omni svg { align-self: center; }

/* ── Scroll reveal ─────────────────────────────────────────────────────── */
/* Applied by script.js only. Without JS the class is never added and content is
   visible by default — the page must never depend on JS to be readable. */
.reveal.is-armed { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 34px; padding-bottom: 56px;
    text-align: center;
  }
  .hero__lead, .almost__text { margin-inline: auto; }
  .eyebrow { margin-bottom: 18px; }
  .countdown__list { justify-content: center; }
  .notify__form { justify-content: center; }
  .visual { order: 2; min-height: 420px; }
  .flow__arrow { flex-basis: 100%; transform: rotate(90deg); }
}

@media (max-width: 560px) {
  .shell { padding-inline: 18px; }
  .header { padding-top: 16px; }
  .brand__logo { height: 36px; }
  .status { font-size: .66rem; padding: 6px 12px 6px 10px; }

  /* Only the mark and its orb remain, so the box no longer needs room for cards. */
  .visual { min-height: 340px; }
  .visual__logo img { max-width: 240px; }

  .countdown { padding: 16px 10px; }
  /* Units share the row evenly instead of each claiming a fixed 52px, so the
     labels keep breathing room at 320px. */
  .countdown__list { gap: 4px; }
  .unit { min-width: 0; flex: 1 1 0; }
  .unit__label { font-size: .62rem; letter-spacing: .06em; }
  /* The whole <li>, not just the glyph inside it. */
  .unit--sep { display: none; }

  .notify__form { flex-direction: column; }
  /*
   * `flex: 1 1 260px` on the field is a WIDTH basis in the default row direction —
   * but this container is a column here, where flex-basis sizes the MAIN axis,
   * i.e. the height. The input was therefore given a 260px-tall box and the button
   * was pushed a quarter of a screen down it. Reset the basis with the direction.
   */
  .field { flex: 0 0 auto; width: 100%; }
  .btn { width: 100%; }
  .cta__panel { padding: 34px 22px; }
  .footer__inner { text-align: center; }
}

@media (max-width: 360px) {
  .unit { min-width: 44px; }
  .unit__label { font-size: .6rem; letter-spacing: .06em; }
}

/* Wide screens: keep the measure readable rather than stretching the shell. */
@media (min-width: 1600px) {
  :root { --shell: 1280px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
/* Everything decorative stops. The countdown still ticks (it is information,
   not decoration) and reveals resolve to plain visible content. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .blob, .visual__orb, .visual__ring, .visual__logo,
  .status__dot::after, .grad, .brand__name b, .flow__dash {
    animation: none !important;
  }
  .grad, .unit__value, .countdown__live, .flow__num {
    /* No sliding gradient, but the fill must survive — otherwise the text is
       transparent on transparent and simply disappears. */
    animation: none !important;
  }
  .reveal.is-armed { opacity: 1 !important; transform: none !important; }
}