/* ─────────────────────────────────────────────────────────────
   PipelineAI — landing tokens & base
   Source de vérité du design system (cohérent avec le brief)
   ───────────────────────────────────────────────────────────── */

:root {
  /* Backgrounds (légèrement retouchés pour plus de profondeur) */
  --bg:        #0A0E1A;
  --bg-2:      #0F1422;
  --bg-3:      #131A2C;
  --bg-4:      #1A2238;
  --bg-elev:   #161E33;

  /* Borders */
  --border:    #1F2A44;
  --border-2:  rgba(255,255,255,0.06);
  --border-3:  rgba(255,255,255,0.10);

  /* Brand accents */
  --blue:      #3B82F6;
  --blue-soft: #60A5FA;
  --violet:    #8B5CF6;
  --violet-soft:#A78BFA;
  --cyan:      #06B6D4;
  --green:     #10B981;
  --green-soft:#34D399;
  --amber:     #F59E0B;
  --red:       #EF4444;
  --pink:      #EC4899;

  /* Text */
  --text:      #F1F5F9;
  --text-2:    #94A3B8;
  --text-3:    #64748B;
  --text-4:    #475569;

  /* Signature gradients */
  --grad:      linear-gradient(135deg,#3B82F6 0%,#8B5CF6 100%);
  --grad-2:    linear-gradient(135deg,#06B6D4 0%,#3B82F6 100%);
  --grad-3:    linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);
  --grad-mesh: radial-gradient(at 20% 10%, rgba(59,130,246,.20) 0px, transparent 50%),
               radial-gradient(at 80% 10%, rgba(139,92,246,.18) 0px, transparent 50%),
               radial-gradient(at 50% 100%, rgba(6,182,212,.14) 0px, transparent 50%);

  /* Glows */
  --glow:        0 0 60px rgba(59,130,246,0.22);
  --glow-soft:   0 0 30px rgba(59,130,246,0.12);
  --glow-violet: 0 0 60px rgba(139,92,246,0.22);

  /* Type */
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Plus Jakarta Sans', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Radius */
  --r-sm: 8px;
  --r:    14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Layout */
  --container: 1180px;
  --container-tight: 980px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  font-feature-settings: "ss01","cv11";
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(59,130,246,0.35); color: #fff; }

/* ── Container ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-tight {
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Type primitives ── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow.green { color: var(--green-soft); }
.eyebrow.violet { color: var(--violet-soft); }
.eyebrow.red    { color: #F87171; }
.eyebrow.muted  { color: var(--text-3); }
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.display {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}
.display-lg { font-size: clamp(2.5rem, 6.8vw, 5.25rem); }
.display-md { font-size: clamp(2rem, 4.5vw, 3.5rem); }
.display-sm { font-size: clamp(1.65rem, 3vw, 2.5rem); }

.grad-word {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-word.cyan {
  background: var(--grad-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lede {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 56ch;
  text-wrap: pretty;
}

.mono { font-family: var(--mono); }

/* ── Ambient backgrounds (4 styles, switchable via .ambient-X on body) ── */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  transition: opacity 600ms ease;
}
.ambient-grid {
  background-image:
    linear-gradient(rgba(59,130,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 25%, transparent 100%);
}
.ambient-mesh {
  background:
    radial-gradient(ellipse 60% 50% at 12% 0%, rgba(59,130,246,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 90% 8%, rgba(139,92,246,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(6,182,212,0.12) 0%, transparent 60%);
  filter: saturate(110%);
}
.ambient-orbs::before,
.ambient-orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}
.ambient-orbs::before {
  top: -120px; left: -80px; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(59,130,246,0.55) 0%, transparent 70%);
}
.ambient-orbs::after {
  top: 25%; right: -120px; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(139,92,246,0.5) 0%, transparent 70%);
}
.ambient-dots {
  background-image: radial-gradient(rgba(148,163,184,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
}

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

main, nav, footer, section { position: relative; z-index: 2; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  user-select: none;
}
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 0 22px rgba(59,130,246,.30), 0 8px 24px rgba(15,20,40,.4);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 0 36px rgba(59,130,246,.45), 0 14px 30px rgba(15,20,40,.5); }
.btn-primary .ptag {
  background: rgba(255,255,255,.18);
  padding: 2px 8px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}
.btn-ghost {
  background: rgba(255,255,255,.03);
  border-color: var(--border);
  color: var(--text-2);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-3); background: rgba(255,255,255,.05); }
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-2);
}
.btn-outline:hover { color: var(--text); border-color: var(--blue); }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 14px 24px; font-size: 15.5px; border-radius: 14px; }
.btn-block { width: 100%; }

/* ── Card ── */
.card {
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.card-glass {
  background: rgba(22, 30, 51, .58);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-3);
  border-radius: var(--r-lg);
}

/* ── Pills / chips ── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  font-family: var(--sans);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill.green   { background: rgba(16,185,129,.10); color: #6EE7B7; border:1px solid rgba(16,185,129,.22); }
.pill.green   .dot { background: var(--green); box-shadow: 0 0 10px var(--green); }
.pill.blue    { background: rgba(59,130,246,.10); color: #93C5FD; border:1px solid rgba(59,130,246,.22); }
.pill.blue    .dot { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.pill.amber   { background: rgba(245,158,11,.10); color: #FCD34D; border:1px solid rgba(245,158,11,.22); }
.pill.amber   .dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pill.violet  { background: rgba(139,92,246,.10); color: #C4B5FD; border:1px solid rgba(139,92,246,.22); }
.pill.violet  .dot { background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.pill.muted   { background: rgba(148,163,184,.06); color: var(--text-2); border:1px solid var(--border); }

/* ── Sections ── */
section.section { padding: clamp(80px, 9vw, 140px) 0; position: relative; }
section.section.tight { padding: clamp(60px, 7vw, 100px) 0; }
section.section + section.section { border-top: 1px solid var(--border-2); }
section.alt { background: rgba(11, 17, 36, .55); }

.section-head { max-width: 720px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head p { margin-top: 18px; }

/* ── Scroll reveal (CSS-only; everything visible by default — keeps the design robust) ── */
.fu, .fu.d1, .fu.d2, .fu.d3, .fu.d4 { opacity: 1; transform: none; }

/* ── Brand logo block ── */
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 20px rgba(59,130,246,.4);
  position: relative;
}
.brand-mark::after {
  content:""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none;
}
.brand .ai {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animations ── */
@keyframes pulse-dot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes float-up  { 0% { transform: translateY(10px); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes shimmer   { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes spin-slow { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
@keyframes drift     { 0%,100% { transform: translate(0,0) } 50% { transform: translate(8px, -6px) } }

/* ── Utilities ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 12px; } .gap-3 { gap: 16px; } .gap-4 { gap: 24px; } .gap-6 { gap: 36px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 12px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-6 { margin-top: 36px; } .mt-8 { margin-top: 48px; }
.muted { color: var(--text-2); }
.muted-2 { color: var(--text-3); }

/* ── Responsive base ── */
@media (max-width: 860px) {
  section.section { padding: clamp(60px, 12vw, 90px) 0; }
}