@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

    :root {
      --bg: #04110f;
      --bg-deep: #020a09;
      --surface: #0a1c19;
      --surface-2: #0f2723;
      --border: #173a34;
      --border-glow: #22574d;
      --text: #eafcf8;
      --muted: #83a8a0;
      --blue: #14b8a6;
      --cyan: #2dd4bf;
      --gradient: linear-gradient(135deg, #0ea5a0, #0891b2);
      --gradient-text: linear-gradient(135deg, #5eead4, #2dd4bf);
      --glow-blue: rgba(20, 184, 166, 0.16);
      --glow-cyan: rgba(45, 212, 191, 0.10);
      --display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

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

    body {
      font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
      background:
        radial-gradient(1200px 700px at 78% -8%, rgba(20,184,166,0.18), transparent 60%),
        radial-gradient(1000px 800px at 12% 8%, rgba(8,145,178,0.14), transparent 55%),
        radial-gradient(900px 900px at 50% 120%, rgba(45,212,191,0.10), transparent 60%),
        linear-gradient(180deg, #051815 0%, var(--bg) 32%, #030d0b 100%);
      background-attachment: fixed;
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* Stromende contour-golven — geeft diepte/beweging zonder rommel */
    .wave-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.55;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
      mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
    }
    .wave-bg svg { width: 100%; height: 100%; display: block; }
    .wave-bg path { fill: none; stroke: rgba(45,212,191,0.20); stroke-width: 1.1; }
    .wave-bg path:nth-child(3n) { stroke: rgba(20,184,166,0.28); }
    .wave-bg path:nth-child(5n) { stroke: rgba(94,234,212,0.16); }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 40px;
    }
    @media (max-width: 768px) {
      .container { padding: 0 20px; }
    }

    /* Grid background */
    .grid-bg {
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(20,184,166,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
      z-index: 0;
    }

    /* Candlestick decorations */
    .candle-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.04;
    }

    .candle-bg::before {
      content: '';
      position: absolute;
      left: 8%;
      top: 15%;
      width: 3px;
      height: 80px;
      background: var(--cyan);
      box-shadow:
        40px 20px 0 0 var(--blue),
        40px 20px 0 0 var(--blue),
        80px -10px 0 0 var(--cyan),
        120px 30px 0 0 var(--blue),
        160px -20px 0 0 var(--cyan),
        200px 5px 0 0 var(--blue);
    }

    .candle-bg::after {
      content: '';
      position: absolute;
      right: 8%;
      top: 25%;
      width: 3px;
      height: 60px;
      background: var(--blue);
      box-shadow:
        -40px 15px 0 0 var(--cyan),
        -80px -5px 0 0 var(--blue),
        -120px 25px 0 0 var(--cyan),
        -160px -15px 0 0 var(--blue);
    }

    section, .hero, .final-cta, footer, .stats-bar {
      position: relative;
      z-index: 1;
    }

    /* Hero */
    .hero {
      position: relative;
      padding-top: 28px;
      padding-bottom: 60px;
      overflow: hidden;
    }
    .hero-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0 56px;
      position: relative;
      z-index: 3;
    }
    .hero-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      letter-spacing: 0.22em;
      font-size: 14px;
      color: var(--text);
    }
    .hero-brand img {
      width: 60px; height: 60px;
      object-fit: contain;
      background: transparent;
      display: block;
      filter: drop-shadow(0 0 16px rgba(45,212,191,0.30));
    }
    .hero-brand span {
      font-size: 18px;
      letter-spacing: 0.28em;
    }
    .hero-topbar__links {
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .hero-topbar__links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }
    .hero-topbar__links a:hover { color: var(--text); }
    .hero-topbar__cta {
      color: var(--text) !important;
      padding: 8px 18px;
      border: 1px solid var(--border-glow);
      border-radius: 999px;
      background: rgba(20,184,166,0.08);
      transition: background 0.2s, border-color 0.2s;
    }
    .hero-topbar__cta:hover {
      background: rgba(20,184,166,0.18);
      border-color: var(--cyan);
    }
    @media (max-width: 640px) {
      .hero-topbar { padding-bottom: 32px; }
      .hero-topbar__links a:not(.hero-topbar__cta) { display: none; }
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(6,20,17,0.6);
      backdrop-filter: blur(8px);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin-bottom: 28px;
    }
    .hero-eyebrow__dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 10px #34d399;
      animation: dotPulse 1.8s ease-in-out infinite;
    }
    .hero-actions {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-cta-ghost {
      color: var(--text);
      text-decoration: none;
      font-weight: 600;
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 16px 10px;
      transition: color 0.2s, gap 0.2s;
    }
    .hero-cta-ghost span {
      color: var(--cyan);
      transition: transform 0.2s;
      display: inline-block;
    }
    .hero-cta-ghost:hover { color: var(--cyan); gap: 14px; }
    .hero-cta-ghost:hover span { transform: translateX(4px); }
    .hero-trust {
      display: flex;
      justify-content: center;
      gap: 48px;
      margin-top: 52px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }
    .hero-trust__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .hero-trust__item b {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px;
      font-weight: 700;
      background: var(--gradient);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.02em;
    }
    .hero-trust__item span {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
    }
    @media (max-width: 640px) {
      .hero-trust { gap: 28px; }
      .hero-trust__item b { font-size: 18px; }
    }

    .hero::before {
      content: '';
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 1000px;
      height: 800px;
      background: radial-gradient(ellipse, var(--glow-blue) 0%, var(--glow-cyan) 30%, transparent 70%);
      pointer-events: none;
    }

    .hero-top {
      text-align: center;
      position: relative;
      z-index: 1;
      margin-bottom: 56px;
    }

    .hero-showcase {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      animation: fadeUp 1s ease-out 0.2s both;
      height: 500px;
    }

    .hero-screenshot-card {
      position: absolute;
      border-radius: 16px 16px 0 0;
      overflow: hidden;
      border: 1px solid var(--border-glow);
      border-bottom: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hero-screenshot-card img {
      width: 100%;
      display: block;
    }

    .hero-screenshot-card:first-child {
      left: 0;
      top: 0;
      width: 62%;
      z-index: 2;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px var(--glow-blue);
      animation: floatA 9s ease-in-out infinite;
    }

    .hero-screenshot-card:first-child:hover {
      animation-play-state: paused;
      transform: translateY(-6px) scale(1.02);
      z-index: 4;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--glow-blue);
    }

    .hero-screenshot-card:last-child {
      right: 0;
      top: 30px;
      width: 62%;
      z-index: 1;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 50px var(--glow-cyan);
      animation: floatB 11s ease-in-out infinite;
    }

    .hero-screenshot-card:last-child:hover {
      animation-play-state: paused;
      transform: translateY(-6px) scale(1.02);
      z-index: 4;
      box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--glow-cyan);
    }

    @keyframes floatA {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-14px) rotate(-0.3deg); }
    }
    @keyframes floatB {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-22px) rotate(0.4deg); }
    }

    /* Static, subtle warm halo (calm — geen puls) */
    .hero::before { opacity: 0.7; }

    /* Floating AI-agent overlay card */
    .hero-agent {
      position: absolute;
      left: 50%;
      top: 58%;
      transform: translate(-50%, -50%);
      width: 320px;
      max-width: 78%;
      background: rgba(6,20,17, 0.78);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--border-glow);
      border-radius: 16px;
      padding: 16px 18px;
      z-index: 5;
      box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(45,212,191,0.18);
      opacity: 0;
      animation: agentIn 1.2s ease-out 0.8s forwards, agentFloat 7s ease-in-out 2s infinite;
    }
    .hero-agent__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .hero-agent__dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--gradient);
      box-shadow: 0 0 14px var(--cyan);
      animation: dotPulse 1.8s ease-in-out infinite;
    }
    .hero-agent__title {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--text);
    }
    .hero-agent__title em {
      font-style: normal;
      color: var(--cyan);
      margin-left: 6px;
    }
    .hero-agent__bubble {
      font-size: 13px;
      color: var(--text);
      background: rgba(20,184,166,0.10);
      border: 1px solid rgba(20,184,166,0.25);
      border-radius: 10px;
      padding: 9px 12px;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    .hero-agent__verdict {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #14b8a6;
      display: flex;
      align-items: center;
      gap: 8px;
      letter-spacing: 0.08em;
    }
    .hero-agent__verdict::before {
      content: "";
      width: 6px; height: 6px; border-radius: 50%;
      background: #14b8a6;
      box-shadow: 0 0 10px #14b8a6;
    }
    .hero-agent__typing {
      display: inline-flex;
      gap: 3px;
      margin-left: 6px;
      vertical-align: middle;
    }
    .hero-agent__typing span {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--muted);
      animation: typing 1.4s ease-in-out infinite;
    }
    .hero-agent__typing span:nth-child(2) { animation-delay: 0.2s; }
    .hero-agent__typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typing {
      0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
      30%           { opacity: 1;    transform: translateY(-3px); }
    }
    @keyframes dotPulse {
      0%, 100% { box-shadow: 0 0 6px var(--cyan);  transform: scale(1); }
      50%      { box-shadow: 0 0 18px var(--cyan); transform: scale(1.15); }
    }
    @keyframes agentIn {
      from { opacity: 0; transform: translate(-50%, -40%); }
      to   { opacity: 1; transform: translate(-50%, -50%); }
    }
    @keyframes agentFloat {
      0%, 100% { transform: translate(-50%, -50%); }
      50%      { transform: translate(-50%, calc(-50% - 8px)); }
    }

    @media (max-width: 760px) {
      .hero-agent { display: none; }
    }

    .hero-screenshot-label {
      position: absolute;
      top: 16px;
      background: rgba(6,20,17, 0.88);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-glow);
      border-radius: 10px;
      padding: 10px 16px;
      z-index: 3;
    }

    .hero-screenshot-card:first-child .hero-screenshot-label { left: 16px; }
    .hero-screenshot-card:last-child .hero-screenshot-label { right: 16px; }

    .hero-screenshot-label h3 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .hero-screenshot-label span {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero-logo { display: none; }

    .hero-title {
      font-family: var(--display);
      font-size: clamp(30px, 7.2vw, 66px);
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.06;
      margin-bottom: 24px;
      color: var(--text);
      max-width: 880px;
      margin-left: auto;
      margin-right: auto;
      overflow-wrap: break-word;
    }
    .hero-title em {
      font-style: normal;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    @media (max-width: 720px) {
      /* hero-title schaalt vloeiend via clamp() — geen vaste override */
    }

    .tagline {
      font-size: 19px;
      color: var(--muted);
      max-width: 640px;
      margin: 0 auto 36px;
      line-height: 1.6;
    }

    .hero-cta {
      display: inline-block;
      background: linear-gradient(135deg, #10b8a4 0%, #0891b2 55%, #1d6fd0 100%);
      color: #fff;
      text-decoration: none;
      padding: 16px 44px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.2px;
      transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
      box-shadow: 0 10px 34px rgba(16,184,164,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .hero-cta:hover {
      transform: translateY(-2px);
      filter: brightness(1.06);
      box-shadow: 0 14px 42px rgba(16,184,164,0.42), inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .hero-sub {
      margin-top: 20px;
      font-size: 14px;
      color: var(--muted);
    }

    /* Stats */
    .stats-bar {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--bg-deep);
    }

    .stats {
      display: flex;
      justify-content: center;
      gap: 64px;
      padding: 40px 0;
    }

    .stat { text-align: center; }

    .stat-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 32px;
      font-weight: 700;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-label {
      font-size: 12px;
      color: var(--muted);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
    }

    /* Sections */
    section { padding: 92px 0; }

    .section-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 3px;
      color: var(--blue);
      margin-bottom: 14px;
      font-weight: 700;
    }

    h1, h2, h3 { font-family: var(--display); }
    h2 {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .section-desc {
      color: var(--muted);
      font-size: 17px;
      margin-bottom: 48px;
      max-width: 560px;
    }

    /* Features */
    .features {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    .feature {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 32px;
      transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
    }

    .feature:hover {
      border-color: var(--border-glow);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px var(--glow-blue);
    }

    .feature.wide {
      grid-column: span 2;
      background: linear-gradient(135deg, var(--surface) 0%, rgba(20,184,166,0.04) 100%);
      border-color: var(--border-glow);
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      background: linear-gradient(135deg, var(--glow-blue), var(--glow-cyan));
      border: 1px solid var(--border-glow);
      font-size: 18px;
    }

    .feature h3 {
      font-size: 17px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .feature p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* Showcase CTA */
    .showcase-cta {
      text-align: center;
      position: relative;
    }

    .showcase-cta::before {
      content: '';
      position: absolute;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 600px;
      background: radial-gradient(ellipse, var(--glow-cyan) 0%, transparent 60%);
      pointer-events: none;
      opacity: 0.5;
    }

    .showcase-cta .section-tag { margin-bottom: 16px; }

    .showcase-cta h2 {
      font-size: 44px;
      line-height: 1.15;
      max-width: 700px;
      margin: 0 auto 16px;
    }

    .showcase-cta h2 .gradient-word {
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .showcase-cta .section-desc {
      max-width: 520px;
      margin: 0 auto 48px;
    }

    .showcase-cards {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 20px;
      max-width: 1060px;
      margin: 0 auto;
    }

    .showcase-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border-glow);
      background: var(--surface);
      transition: transform 0.2s, box-shadow 0.3s;
    }

    .showcase-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 50px var(--glow-blue);
    }

    .showcase-card img {
      width: 100%;
      display: block;
    }

    .showcase-card-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 24px;
      background: linear-gradient(0deg, rgba(6,20,17, 0.92) 0%, rgba(6,20,17, 0.6) 60%, transparent 100%);
    }

    .showcase-card-label h3 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .showcase-card-label span {
      font-size: 13px;
      color: var(--muted);
    }

    /* Tools */
    .tools-section { position: relative; }

    .tools-hero-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }

    .tool-hero {
      background: linear-gradient(135deg, var(--surface) 0%, rgba(45,212,191,0.05) 100%);
      border: 1px solid var(--border-glow);
      border-radius: 18px;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s;
    }

    .tool-hero:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 50px var(--glow-blue);
      border-color: var(--cyan);
    }

    .tool-hero-media {
      position: relative;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      background: var(--bg-deep);
      border-bottom: 1px solid var(--border);
    }

    .tool-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top left;
      display: block;
      transition: transform 0.4s ease;
    }

    .tool-hero:hover .tool-hero-media img {
      transform: scale(1.02);
    }

    .tool-hero-media::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(6,20,17, 0.4) 100%);
      pointer-events: none;
    }

    .tool-hero-body {
      padding: 26px 28px 28px;
    }

    .tools-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .tool {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 26px;
      transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
    }

    .tool:hover {
      border-color: var(--border-glow);
      transform: translateY(-3px);
      box-shadow: 0 10px 40px var(--glow-blue);
    }

    .tool.featured {
      background: linear-gradient(135deg, var(--surface) 0%, rgba(45,212,191,0.05) 100%);
      border-color: var(--border-glow);
    }

    .tool-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .tool-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(20,184,166,0.12), rgba(45,212,191,0.12));
      border: 1px solid var(--border-glow);
    }

    .tool h3 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .tool-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--cyan);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-weight: 600;
    }

    .tool p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* Pipeline */
    .pipeline-section { position: relative; }

    .pipeline-section::after {
      content: '';
      position: absolute;
      right: -300px;
      top: 50%;
      transform: translateY(-50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 70%);
      pointer-events: none;
    }

    .pipeline {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      position: relative;
    }

    .phase {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 16px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s, transform 0.2s;
    }

    .phase:hover {
      border-color: var(--cyan);
      transform: translateY(-3px);
    }

    .phase::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient);
    }

    .phase-num {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--cyan);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .phase-name {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .phase-desc {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
    }

    .pipeline-note {
      text-align: center;
      margin-top: 32px;
      font-size: 15px;
      color: var(--muted);
    }

    .pipeline-note strong {
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Pricing */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      max-width: 700px;
      gap: 16px;
    }

    .price-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px 28px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.3s;
    }

    .price-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px var(--glow-blue);
    }

    .price-card.featured {
      border-color: transparent;
      background: linear-gradient(var(--surface), var(--surface)) padding-box,
                  var(--gradient) border-box;
      border: 2px solid transparent;
      position: relative;
    }

    .price-badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient);
      color: white;
      padding: 5px 24px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .price-period {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
    }

    .price-original {
      font-size: 16px;
      color: var(--muted);
      text-decoration: line-through;
      margin-bottom: 4px;
    }

    .price-amount {
      font-family: 'JetBrains Mono', monospace;
      font-size: 48px;
      font-weight: 900;
      letter-spacing: -2px;
      line-height: 1;
    }

    .price-card.featured .price-amount {
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .price-unit {
      font-size: 16px;
      font-weight: 400;
      color: var(--muted);
    }

    .price-save {
      font-size: 13px;
      color: var(--cyan);
      margin-top: 12px;
      font-weight: 600;
    }

    .price-cta {
      display: block;
      margin-top: 28px;
      padding: 14px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      transition: transform 0.2s, box-shadow 0.2s;
      letter-spacing: 0.5px;
    }

    .price-cta:hover { transform: translateY(-1px); }

    .price-card.featured .price-cta {
      background: var(--gradient);
      color: white;
      box-shadow: 0 4px 20px rgba(20,184,166,0.3);
    }

    .price-card:not(.featured) .price-cta {
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .pricing-note {
      text-align: center;
      margin-top: 28px;
      color: var(--muted);
      font-size: 14px;
    }

    /* Not section */
    .not-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px;
      margin-top: 64px;
    }

    .not-section h3 {
      font-size: 20px;
      margin-bottom: 24px;
      font-weight: 700;
    }

    .not-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .not-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      background: rgba(239, 68, 68, 0.04);
      border: 1px solid rgba(239, 68, 68, 0.08);
      border-radius: 10px;
      font-size: 14px;
      color: var(--muted);
    }

    .not-x {
      color: #f87171;
      font-weight: 700;
      font-size: 18px;
      flex-shrink: 0;
    }

    /* FAQ */
    .faq-section { padding: 64px 0 32px; }
    .faq-grid {
      max-width: 760px;
      margin: 32px auto 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color 0.2s ease;
    }
    .faq-item[open] { border-color: rgba(20,184,166,0.35); }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 22px;
      font-weight: 600;
      font-size: 15px;
      color: var(--text);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      color: var(--accent-cyan);
      font-size: 22px;
      font-weight: 400;
      line-height: 1;
      transition: transform 0.2s ease;
    }
    .faq-item[open] summary::after { content: '−'; transform: rotate(0); }
    .faq-item .faq-body {
      padding: 0 22px 20px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* Final CTA */
    .final-cta {
      text-align: center;
      padding: 80px 0;
      position: relative;
    }

    .final-cta::before {
      content: '';
      position: absolute;
      bottom: -100px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 600px;
      background: radial-gradient(ellipse, var(--glow-blue) 0%, var(--glow-cyan) 30%, transparent 70%);
      pointer-events: none;
    }

    .final-cta .container { position: relative; z-index: 1; }

    .final-cta h2 {
      font-size: 44px;
      margin-bottom: 16px;
    }

    .final-cta p {
      color: var(--muted);
      margin-bottom: 40px;
      font-size: 18px;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 40px 0;
      color: var(--muted);
      font-size: 13px;
      border-top: 1px solid var(--border);
      background: var(--bg-deep);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .hero-showcase { height: 260px; }
      .hero-screenshot-card:first-child { width: 75%; }
      .hero-screenshot-card:last-child { width: 75%; top: 20px; }
      .tagline { font-size: 17px; }
      .hero { padding-top: 60px; }
      .showcase-cta h2 { font-size: 32px; }
      .showcase-cards { grid-template-columns: 1fr; }
      h2 { font-size: 28px; }
      .features { grid-template-columns: 1fr; }
      .feature.wide { grid-column: span 1; }
      .pipeline { grid-template-columns: repeat(2, 1fr); }
      .tools-grid { grid-template-columns: 1fr; }
      .tools-hero-grid { grid-template-columns: 1fr; gap: 16px; }
      .tool-hero-body { padding: 20px 22px 24px; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; max-width: 380px; }
      .stats { gap: 32px; flex-wrap: wrap; }
      .not-grid { grid-template-columns: 1fr; }
      section { padding: 40px 0; }
      .final-cta { padding: 48px 0; }
    }

    /* Feature rows — alternating 2-col showcase */
    .feature-row {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 64px;
      align-items: center;
      padding: 72px 0;
      position: relative;
    }
    .feature-row + .feature-row {
      border-top: 1px solid var(--border);
    }
    .feature-row--reverse .feature-row__media { order: 2; }
    .feature-row--reverse .feature-row__body { order: 1; }
    .feature-row--wide { grid-template-columns: 1.7fr 1fr; gap: 56px; }

    .feature-row__media {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(145deg, var(--surface), var(--bg-deep));
      box-shadow: 0 30px 80px -40px rgba(20,184,166,0.45),
                  0 0 0 1px rgba(45,212,191,0.04) inset;
      transition: transform .5s ease, box-shadow .5s ease;
    }
    .feature-row__media::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: linear-gradient(135deg, rgba(20,184,166,.25), transparent 40%, rgba(45,212,191,.18));
      opacity: .6;
      pointer-events: none;
      border-radius: inherit;
    }
    .feature-row__media img {
      display: block;
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1;
    }
    .feature-row:hover .feature-row__media {
      transform: translateY(-4px);
      box-shadow: 0 40px 100px -40px rgba(20,184,166,0.6),
                  0 0 0 1px rgba(45,212,191,0.08) inset;
    }

    .mentor-card {
      background: linear-gradient(160deg, rgba(20,184,166,0.08), rgba(45,212,191,0.04) 60%, rgba(6,20,17,0.6));
      border: 1px solid rgba(20,184,166,0.18);
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .mentor-head {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--muted);
    }
    .mentor-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #2dd4bf;
      box-shadow: 0 0 12px #2dd4bf;
      animation: mentorPulse 1.6s ease-in-out infinite;
    }
    @keyframes mentorPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }
    .mentor-label { color: var(--cyan); font-weight: 600; }
    .mentor-tab { margin-left: auto; color: var(--muted); }
    .mentor-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      padding: 14px 0 6px;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mentor-stat__value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 26px;
      font-weight: 700;
      color: var(--text);
      background: linear-gradient(135deg, #0ea5a0, #2dd4bf);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1.1;
    }
    .mentor-stat__value span {
      font-size: 13px;
      font-weight: 500;
      -webkit-text-fill-color: var(--muted);
      color: var(--muted);
      margin-left: 2px;
    }
    .mentor-stat__label {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.4;
    }
    .mentor-feed {
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13px;
      color: var(--text);
    }
    .mentor-feed__line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 8px;
      line-height: 1.5;
    }
    .mentor-feed__line em { color: var(--cyan); font-style: normal; }
    .mentor-feed__tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 4px;
      background: rgba(20,184,166,0.18);
      color: #5eead4;
      flex-shrink: 0;
    }
    .mentor-feed__tag.tag-alt { background: rgba(45,212,191,0.15); color: #2dd4bf; }
    .mentor-feed__tag.tag-ok { background: rgba(52,211,153,0.15); color: #6ee7b7; }
    @media (max-width: 720px) {
      .mentor-stats { grid-template-columns: 1fr; }
    }

    /* Roadmap section */
    .roadmap-section {
      padding: 120px 0 100px;
      background:
        radial-gradient(ellipse at top, rgba(20,184,166,0.08), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(45,212,191,0.06), transparent 55%),
        var(--bg);
      position: relative;
    }
    .roadmap-section::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      pointer-events: none;
    }
    .roadmap-section > .container { position: relative; }
    .roadmap-section h2 em {
      font-style: italic;
      display: inline-block;
      padding-right: 0.12em;
      background: var(--gradient);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .roadmap-grid {
      margin-top: 56px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .roadmap-col {
      position: relative;
      padding: 28px 26px 30px;
      border-radius: 18px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(6px);
      overflow: hidden;
    }
    .roadmap-col::before {
      content: "";
      position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--gradient);
      opacity: 0.8;
    }
    .roadmap-col--shipped::before { background: linear-gradient(180deg, #22c55e, #10b981); }
    .roadmap-col--now::before     { background: linear-gradient(180deg, #2dd4bf, #0ea5a0); }
    .roadmap-col--next::before    { background: linear-gradient(180deg, #0ea5a0, #0d6d63); }
    .roadmap-col__head {
      display: flex; align-items: center; gap: 10px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 22px;
    }
    .roadmap-dot {
      width: 8px; height: 8px; border-radius: 50%;
    }
    .roadmap-dot--shipped { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.7); }
    .roadmap-dot--now     { background: #2dd4bf; box-shadow: 0 0 10px rgba(45,212,191,0.8); animation: roadmapPulse 1.8s ease-in-out infinite; }
    .roadmap-dot--next    { background: #14b8a6; box-shadow: 0 0 10px rgba(167,139,250,0.6); }
    @keyframes roadmapPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .5; transform: scale(1.3); }
    }
    .roadmap-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
    .roadmap-col li {
      position: relative;
      padding-left: 20px;
      color: rgba(255,255,255,0.82);
      font-size: 14.5px;
      line-height: 1.55;
    }
    .roadmap-col li::before {
      content: "";
      position: absolute; left: 0; top: 10px;
      width: 8px; height: 1px;
      background: rgba(255,255,255,0.4);
    }
    .roadmap-col li strong { color: #fff; font-weight: 600; }
    .roadmap-note {
      text-align: center;
      margin-top: 40px;
      color: var(--muted);
      font-size: 14px;
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: 0.04em;
    }
    @media (max-width: 900px) {
      .roadmap-grid { grid-template-columns: 1fr; }
      .roadmap-section { padding: 80px 0 60px; }
    }

    .feature-row__kicker {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .feature-row__kicker::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--gradient);
    }
    .feature-row__kicker b {
      color: transparent;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      background-clip: text;
      font-weight: 700;
    }
    .feature-row__title {
      font-size: clamp(28px, 3.4vw, 42px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }
    .feature-row__title em {
      font-style: normal;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .feature-row__copy {
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
      margin-bottom: 28px;
      max-width: 48ch;
    }
    .feature-row__list {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: grid;
      gap: 10px;
    }
    .feature-row__list li {
      color: var(--text);
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .feature-row__list li::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--gradient);
      flex: none;
      box-shadow: 0 0 12px rgba(45,212,191,.6);
    }
    .feature-row__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px 10px 22px;
      border: 1px solid var(--border-glow);
      border-radius: 999px;
      color: var(--text);
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.02em;
      background: rgba(20,184,166,0.06);
      transition: all .25s ease;
    }
    .feature-row__cta .arrow {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--gradient);
      color: #04110f;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: transform .25s ease;
    }
    .feature-row__cta:hover {
      border-color: var(--cyan);
      background: rgba(45,212,191,0.08);
    }
    .feature-row__cta:hover .arrow { transform: translateX(3px); }

    .stack-rest {
      margin-top: 56px;
      padding-top: 40px;
      border-top: 1px solid var(--border);
    }
    .stack-rest__label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
    }
    .stack-rest__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .stack-rest__item {
      padding: 20px 22px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      transition: all .25s ease;
    }
    .stack-rest__item:hover {
      border-color: var(--border-glow);
      transform: translateY(-2px);
    }
    .stack-rest__item h4 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }
    .stack-rest__item p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }

    @media (max-width: 760px) {
      .feature-row {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 0;
      }
      .feature-row__body { order: 0; }
      .feature-row__media { order: 1; }
      .feature-row--reverse .feature-row__body { order: 0; }
      .feature-row--reverse .feature-row__media { order: 1; }
      .stack-rest__grid { grid-template-columns: 1fr; }
    }

    /* Telegram → MT5 animated demo (replaces static screenshot on the Telegram feature row) */
    .tg-demo {
      display: grid;
      grid-template-columns: minmax(0, 320px) 1fr;
      gap: 20px;
      align-items: stretch;
    }
    .tg-mt5__body { min-height: 460px; }
    .tg-phone {
      background: #17212b;
      border: 1px solid rgba(20,184,166,0.25);
      border-radius: 22px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 30px 70px -30px rgba(45,212,191,0.35),
                  0 0 0 1px rgba(20,184,166,0.08) inset;
    }
    .tg-phone__head {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 14px;
      background: linear-gradient(180deg, #1e2936, #17212b);
      border-bottom: 1px solid rgba(255,255,255,0.05);
      position: relative;
      z-index: 2;
    }
    .tg-phone__icon {
      width: 20px; height: 20px;
      color: rgba(255,255,255,0.55);
      flex-shrink: 0;
      cursor: pointer;
    }
    .tg-phone__icon:hover { color: var(--cyan); }
    .tg-phone__back { width: 22px; height: 22px; }
    .tg-phone__avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #0ea5a0, #2dd4bf);
      display: inline-flex; align-items: center; justify-content: center;
      color: #04110f; font-weight: 800; font-size: 15px;
      font-family: 'Inter', sans-serif;
      box-shadow: 0 0 14px rgba(45,212,191,0.35);
    }
    .tg-phone__id { flex: 1; min-width: 0; }
    .tg-phone__name { font-size: 14px; font-weight: 600; color: #fff; }
    .tg-phone__sub  {
      font-size: 12px; color: rgba(255,255,255,0.5);
      display: inline-flex; align-items: center; gap: 6px;
      font-family: 'Inter', sans-serif;
      letter-spacing: 0;
    }
    .tg-online-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 6px rgba(34,197,94,0.6);
    }
    .tg-phone__actions { display: inline-flex; align-items: center; gap: 14px; }

    .tg-phone__chat {
      flex: 1;
      padding: 16px 12px 10px;
      background:
        radial-gradient(circle at 20% 20%, rgba(20,184,166,0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(45,212,191,0.06), transparent 40%),
        #0e1621;
      position: relative;
      overflow: hidden;
    }
    .tg-phone__chat::before {
      content: "";
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 10% 30%, rgba(255,255,255,0.025) 2px, transparent 2.5px),
        radial-gradient(circle at 60% 10%, rgba(255,255,255,0.02) 2px, transparent 2.5px),
        radial-gradient(circle at 85% 55%, rgba(255,255,255,0.022) 1.5px, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,0.02) 2px, transparent 2.5px),
        radial-gradient(circle at 75% 92%, rgba(255,255,255,0.022) 1.5px, transparent 2px);
      background-size: 240px 240px;
      pointer-events: none;
    }

    .tg-date {
      text-align: center;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }
    .tg-date span {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      background: rgba(0,0,0,0.25);
      padding: 4px 10px;
      border-radius: 999px;
      backdrop-filter: blur(4px);
    }

    .tg-msgs {
      display: flex; flex-direction: column; gap: 6px;
      min-height: 280px;
      position: relative; z-index: 1;
    }
    .tg-msg {
      max-width: 82%;
      padding: 7px 10px 6px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.4;
      opacity: 0;
      transform: translateY(6px);
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    }
    .tg-msg__text { flex: 1 1 auto; }
    .tg-msg__meta {
      font-size: 10px;
      color: rgba(255,255,255,0.55);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      margin-left: auto;
      font-family: 'Inter', sans-serif;
      padding-bottom: 1px;
    }
    .tg-check { width: 14px; height: 10px; color: #2dd4bf; }

    .tg-msg--user {
      align-self: flex-end;
      background: #2b5278;
      color: #fff;
      border-bottom-right-radius: 4px;
    }
    .tg-msg--user .tg-msg__meta { color: rgba(255,255,255,0.7); }
    .tg-msg--user::after {
      content: "";
      position: absolute;
      right: -5px; bottom: 0;
      width: 12px; height: 14px;
      background: #2b5278;
      clip-path: polygon(0 0, 100% 100%, 0 100%);
      border-bottom-right-radius: 2px;
    }
    .tg-msg--user .tg-msg__text code {
      color: #fff;
      background: rgba(255,255,255,0.14);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 12px;
      font-family: 'JetBrains Mono', monospace;
    }

    .tg-msg--bot {
      align-self: flex-start;
      background: #182533;
      color: #fff;
      border-bottom-left-radius: 4px;
    }
    .tg-msg--bot::after {
      content: "";
      position: absolute;
      left: -5px; bottom: 0;
      width: 12px; height: 14px;
      background: #182533;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      border-bottom-left-radius: 2px;
    }
    .tg-msg code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #2dd4bf;
      background: rgba(94,199,240,0.1);
      padding: 1px 5px;
      border-radius: 4px;
    }

    /* Stack bot tails: only last bot message in a cluster gets a tail */
    .tg-msg--bot + .tg-msg--bot::after { display: none; }
    .tg-msg--bot:has(+ .tg-msg--bot)::after { display: none; }

    .tg-typing {
      align-self: flex-start;
      display: inline-flex; gap: 4px;
      padding: 10px 12px;
      background: #182533;
      border-radius: 12px;
      border-bottom-left-radius: 4px;
      opacity: 0;
      position: relative;
    }
    .tg-typing::after {
      content: "";
      position: absolute;
      left: -5px; bottom: 0;
      width: 12px; height: 14px;
      background: #182533;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
    }

    .tg-phone__composer {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      background: #17212b;
      border-top: 1px solid rgba(255,255,255,0.05);
      position: relative; z-index: 2;
    }
    .tg-phone__placeholder {
      flex: 1;
      font-size: 14px;
      color: rgba(255,255,255,0.4);
      font-family: 'Inter', sans-serif;
    }
    .tg-phone__mic {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #0ea5a0, #2dd4bf);
      display: inline-flex; align-items: center; justify-content: center;
      color: #04110f;
      box-shadow: 0 0 14px rgba(45,212,191,0.3);
      flex-shrink: 0;
    }
    .tg-phone__mic svg { width: 18px; height: 18px; }
    .tg-typing span {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--muted);
      animation: tgDot 1.2s ease-in-out infinite;
    }
    .tg-typing span:nth-child(2) { animation-delay: .15s; }
    .tg-typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes tgDot {
      0%, 60%, 100% { opacity: .3; transform: translateY(0); }
      30%           { opacity: 1;  transform: translateY(-3px); }
    }
    @keyframes tgPop {
      0%   { opacity: 0; transform: translateY(6px) scale(.96); }
      100% { opacity: 1; transform: translateY(0)  scale(1); }
    }

    /* Timeline (20s infinite loop): user msg → typing → bot ack → typing → morning report */
    .tg-demo .tg-msg--u1     { animation: tgU1 20s ease-in-out infinite; opacity: 0; }
    .tg-demo .tg-typing--t1  { animation: tgT1 20s ease-in-out infinite; opacity: 0; }
    .tg-demo .tg-msg--b1     { animation: tgB1 20s ease-in-out infinite; opacity: 0; }
    .tg-demo .tg-typing--t2  { animation: tgT2 20s ease-in-out infinite; opacity: 0; }
    .tg-demo .tg-msg--b2     { animation: tgB2 20s ease-in-out infinite; opacity: 0; }
    .tg-demo .tg-msg--b3     { animation: tgB3 20s ease-in-out infinite; opacity: 0; }

    @keyframes tgU1 {
      0%, 4%    { opacity: 0; transform: translateY(8px) scale(.98); }
      8%, 83%   { opacity: 1; transform: translateY(0)  scale(1); }
      88%, 100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes tgT1 {
      0%, 10%   { opacity: 0; transform: translateY(8px); }
      13%, 19%  { opacity: 1; transform: translateY(0); }
      22%, 100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes tgB1 {
      0%, 21%   { opacity: 0; transform: translateY(8px) scale(.98); }
      25%, 83%  { opacity: 1; transform: translateY(0)  scale(1); }
      88%, 100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes tgT2 {
      0%, 31%   { opacity: 0; transform: translateY(8px); }
      34%, 51%  { opacity: 1; transform: translateY(0); }
      54%, 100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes tgB2 {
      0%, 53%   { opacity: 0; transform: translateY(8px) scale(.98); }
      57%, 83%  { opacity: 1; transform: translateY(0)  scale(1); }
      88%, 100% { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes tgB3 {
      0%, 64%   { opacity: 0; transform: translateY(8px) scale(.98); }
      68%, 83%  { opacity: 1; transform: translateY(0)  scale(1); }
      88%, 100% { opacity: 0; transform: translateY(-4px); }
    }

    /* MT5 panel with scanning + drawing effects */
    .tg-mt5 {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(145deg, var(--surface), var(--bg-deep));
      box-shadow: 0 30px 80px -40px rgba(20,184,166,0.45);
    }
    .tg-mt5__chart {
      width: 100%;
      height: 100%;
      display: block;
    }
    .tg-mt5__frame {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(6,20,17,0.6);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .tg-mt5__frame .dots { display: inline-flex; gap: 5px; }
    .tg-mt5__frame .dots i {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--border-glow);
      display: inline-block;
    }
    .tg-mt5__frame .tab { color: var(--cyan); }
    .tg-mt5__body {
      position: relative;
      overflow: hidden;
      min-height: 420px;
      height: calc(100% - 36px);
      background:
        linear-gradient(180deg, rgba(20,184,166,0.04), transparent 40%),
        var(--bg-deep);
    }
    .tg-candle {
      transform-origin: center bottom;
      opacity: 0;
      animation: candleCycle 20s ease-out infinite;
    }
    .tg-candle--up   rect.body { fill: #14b8a6; }
    .tg-candle--up   line.wick { stroke: #14b8a6; }
    .tg-candle--down rect.body { fill: #f87171; }
    .tg-candle--down line.wick { stroke: #f87171; }
    @keyframes candleCycle {
      0%, 26%   { opacity: 0; transform: translateY(10px) scaleY(.4); }
      28%       { opacity: 1; transform: translateY(0)    scaleY(1); }
      92%       { opacity: 1; transform: translateY(0)    scaleY(1); }
      96%, 100% { opacity: 0; transform: translateY(0)    scaleY(1); }
    }
    .tg-mt5__scanline {
      position: absolute;
      left: 0; right: 0;
      height: 180px;
      top: -180px;
      background: linear-gradient(180deg, transparent, rgba(45,212,191,0.22) 50%, transparent);
      pointer-events: none;
      animation: scan 18s linear infinite;
      animation-delay: 5.0s;
    }
    @keyframes scan {
      0%   { top: -180px; opacity: 0; }
      5%   { opacity: 1; }
      35%  { top: 100%;  opacity: 1; }
      40%  { opacity: 0; }
      100% { top: 100%;  opacity: 0; }
    }
    .tg-mt5__badge {
      position: absolute;
      left: 16px; top: 16px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(6,20,17,0.78);
      backdrop-filter: blur(8px);
      border: 1px solid var(--border-glow);
      color: var(--muted);
      display: inline-flex; align-items: center; gap: 8px;
      opacity: 0;
      animation: badgeCycle 20s ease-out infinite;
    }
    @keyframes badgeCycle {
      0%, 26%   { opacity: 0; color: var(--muted); border-color: var(--border-glow); box-shadow: none; }
      28%, 64%  { opacity: 1; color: var(--cyan);  border-color: var(--border-glow); box-shadow: none; }
      66%, 92%  { opacity: 1; color: #14b8a6;      border-color: #14b8a6;            box-shadow: 0 0 30px rgba(20,184,166,0.25); }
      96%, 100% { opacity: 0; color: #14b8a6;      border-color: #14b8a6;            box-shadow: 0 0 30px rgba(20,184,166,0.25); }
    }
    .tg-mt5__badge::before {
      content: ""; width: 8px; height: 8px; border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 10px var(--cyan);
      animation: dotPulse 1.4s ease-in-out infinite;
    }
    @keyframes badgeTesting { to { color: var(--cyan); } }
    @keyframes badgeApproved {
      to { color: #14b8a6; border-color: #14b8a6; box-shadow: 0 0 30px rgba(20,184,166,0.25); }
    }
    .tg-mt5__badge .label-testing  { display: inline; }
    .tg-mt5__badge .label-approved { display: none; }
    .tg-mt5__badge.is-approved .label-testing  { display: none; }
    .tg-mt5__badge.is-approved .label-approved { display: inline; }

    /* Scroll-gated demos: pause all animations until parent marked .is-visible */
    .tg-demo:not(.is-visible),
    .tg-demo:not(.is-visible) *,
    .tg-demo:not(.is-visible) *::before,
    .tg-demo:not(.is-visible) *::after,
    .dash-demo:not(.is-visible),
    .dash-demo:not(.is-visible) *,
    .dash-demo:not(.is-visible) *::before,
    .dash-demo:not(.is-visible) *::after {
      animation-play-state: paused !important;
    }

    .tg-mt5__grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(45,212,191,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,212,191,0.05) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      opacity: 0;
      animation: gridCycle 20s ease-out infinite;
    }
    @keyframes gridCycle {
      0%, 25%   { opacity: 0; }
      28%, 92%  { opacity: 1; }
      96%, 100% { opacity: 0; }
    }

    /* Animated equity curve overlay (SVG path draw) */
    .tg-mt5__curve {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .tg-mt5__curve path {
      fill: none;
      stroke: url(#tgCurveGrad);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 6px rgba(45,212,191,0.55));
      stroke-dasharray: 1200;
      stroke-dashoffset: 1200;
      animation: drawCurve 20s cubic-bezier(.6,.1,.3,1) infinite;
      opacity: 0;
    }
    @keyframes drawCurve {
      0%, 30%   { stroke-dashoffset: 1200; opacity: 1; }
      65%       { stroke-dashoffset: 0;    opacity: 1; }
      92%       { stroke-dashoffset: 0;    opacity: 1; }
      96%, 100% { stroke-dashoffset: 0;    opacity: 0; }
    }
    @keyframes tgCurveDraw {
      0%, 30%   { stroke-dashoffset: 1500; opacity: 1; }
      65%       { stroke-dashoffset: 0;    opacity: 1; }
      92%       { stroke-dashoffset: 0;    opacity: 1; }
      96%, 100% { stroke-dashoffset: 0;    opacity: 0; }
    }

    /* Metrics bubbles that fade in after curve draw */
    .tg-mt5__metrics {
      position: absolute;
      right: 16px; bottom: 16px;
      display: flex; gap: 8px;
      opacity: 0;
      animation: metricsCycle 20s ease-out infinite;
    }
    @keyframes metricsCycle {
      0%, 62%   { opacity: 0; transform: translateY(6px); }
      66%, 92%  { opacity: 1; transform: translateY(0); }
      96%, 100% { opacity: 0; transform: translateY(0); }
    }
    .tg-mt5__metric {
      padding: 6px 10px;
      background: rgba(6,20,17,0.82);
      border: 1px solid var(--border-glow);
      border-radius: 8px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--text);
    }
    .tg-mt5__metric em { font-style: normal; color: #14b8a6; font-weight: 700; margin-left: 4px; }

    @media (max-width: 860px) {
      .tg-demo { grid-template-columns: 1fr; }
      .tg-mt5 { min-height: 280px; }
    }

    /* ===== Pipeline terminal-log demo ===== */
    .pipe-demo {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #0b0e1c, #06070f);
      box-shadow: 0 30px 80px -40px rgba(20,184,166,0.45);
      font-family: 'JetBrains Mono', monospace;
      min-height: 420px;
    }
    .pipe-demo__head {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(6,20,17,0.6);
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .pipe-demo__head .dots { display: inline-flex; gap: 5px; }
    .pipe-demo__head .dots i {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--border-glow);
    }
    .pipe-demo__head .tab { color: var(--cyan); margin-left: auto; }
    .pipe-demo__body {
      padding: 22px 24px;
      font-size: 13.5px;
      line-height: 1.9;
      color: var(--text);
    }
    .pipe-cmd { color: var(--cyan); }
    .pipe-cmd::before { content: "$ "; color: #14b8a6; }
    .pipe-cmd, .pipe-line {
      opacity: 0;
      transform: translateX(-6px);
      animation: pipeIn .3s ease-out forwards;
    }
    .pipe-line {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .pipe-line .idx  { color: var(--muted); width: 36px; }
    .pipe-line .name { color: var(--text); min-width: 180px; }
    .pipe-line .dots-fill {
      flex: 1;
      border-bottom: 1px dotted var(--border-glow);
      height: 1px;
      margin: 0 4px 6px;
    }
    .pipe-line .status {
      font-weight: 700;
      letter-spacing: 0.08em;
      min-width: 54px;
      text-align: right;
    }
    .pipe-line .status.pass { color: #14b8a6; }
    .pipe-line .status.warn { color: #fbbf24; }
    .pipe-line .spinner {
      display: inline-block;
      width: 10px; height: 10px;
      border: 2px solid rgba(45,212,191,0.2);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: pipeSpin .8s linear infinite;
      vertical-align: -1px;
    }
    .pipe-verdict {
      margin-top: 18px;
      padding: 12px 16px;
      border: 1px solid rgba(20,184,166,0.3);
      background: rgba(20,184,166,0.06);
      border-radius: 10px;
      color: #14b8a6;
      font-weight: 700;
      letter-spacing: 0.08em;
      display: flex; align-items: center; gap: 10px;
      opacity: 0;
      animation: pipeIn .5s ease-out forwards;
    }
    .pipe-verdict::before {
      content: "✓";
      font-size: 16px;
      width: 22px; height: 22px;
      background: rgba(20,184,166,0.2);
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
    }
    @keyframes pipeIn {
      0%   { opacity: 0; transform: translateX(-6px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes pipeSpin { to { transform: rotate(360deg); } }

    /* Timeline — 18s loop total. Lines reveal at +1.5s cadence, final verdict at 14s */
    .pipe-demo .pipe-cmd    { animation-delay: 0.3s;  }
    .pipe-demo .pipe-line:nth-of-type(2) { animation-delay: 1.5s; }
    .pipe-demo .pipe-line:nth-of-type(3) { animation-delay: 3.3s; }
    .pipe-demo .pipe-line:nth-of-type(4) { animation-delay: 5.1s; }
    .pipe-demo .pipe-line:nth-of-type(5) { animation-delay: 6.9s; }
    .pipe-demo .pipe-line:nth-of-type(6) { animation-delay: 8.7s; }
    .pipe-demo .pipe-line:nth-of-type(7) { animation-delay: 10.5s; }
    .pipe-demo .pipe-verdict             { animation-delay: 13.0s; }

    /* ===== TraideDash prop-firm simulator demo ===== */
    .dash-demo {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, #0a1c19, #04110f);
      box-shadow: 0 30px 80px -40px rgba(45,212,191,0.35);
      min-height: 420px;
    }
    .dash-demo__titlebar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: rgba(6,20,17,0.6);
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--muted);
      text-transform: uppercase;
    }
    .dash-demo__titlebar .dots { display: inline-flex; gap: 5px; }
    .dash-demo__titlebar .dots i {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--border-glow);
    }
    .dash-demo__titlebar .app { color: var(--cyan); margin-left: auto; }
    .dash-demo__body {
      padding: 22px 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
    }
    .dash-card {
      background: rgba(20,184,166,0.04);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
    }
    .dash-card__label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: var(--muted);
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .dash-card__value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
    }
    .dash-card__value em {
      font-style: normal;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .dash-card__sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 4px;
    }
    .dash-challenge {
      grid-column: span 2;
      padding: 16px 18px;
    }
    .dash-challenge__row {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 10px;
    }
    .dash-challenge__title {
      font-size: 14px; font-weight: 700; color: var(--text);
    }
    .dash-challenge__phase {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(45,212,191,0.1);
      border: 1px solid rgba(45,212,191,0.3);
      color: var(--cyan);
      transition: background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
    }
    .dash-challenge__phase.is-funded {
      background: rgba(20,184,166,0.15);
      border-color: rgba(20,184,166,0.5);
      color: #14b8a6;
      box-shadow: 0 0 20px rgba(20,184,166,0.25);
    }
    .dash-progress {
      position: relative;
      height: 10px;
      background: rgba(255,255,255,0.04);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .dash-progress__fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 0%;
      background: var(--gradient);
      border-radius: 999px;
      box-shadow: 0 0 20px rgba(45,212,191,0.4);
      animation: dashFill 18s cubic-bezier(.5,.1,.2,1) infinite;
    }
    .dash-progress__fill::after {
      content: "";
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 6px;
      background: white;
      opacity: 0.6;
      box-shadow: 0 0 12px white;
    }
    .dash-progress__meta {
      display: flex; justify-content: space-between;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--muted);
    }
    .dash-progress__meta em {
      font-style: normal;
      color: var(--text);
    }
    @keyframes dashFill {
      0%, 5%    { width: 0%; }
      27%       { width: 32%; }
      50%       { width: 68%; }
      72%       { width: 96%; }
      78%, 95%  { width: 100%; }
      99%, 100% { width: 0%; }
    }
    .dash-counter {
      font-variant-numeric: tabular-nums;
    }
    /* Mini equity sparkline */
    .dash-spark {
      grid-column: span 2;
      padding: 14px 16px;
    }
    .dash-spark__svg {
      width: 100%;
      height: 100px;
      display: block;
      margin-top: 8px;
    }
    .dash-spark__svg path.line {
      fill: none;
      stroke: url(#dashSparkGrad);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dashDraw 18s cubic-bezier(.6,.1,.3,1) infinite;
      filter: drop-shadow(0 0 5px rgba(45,212,191,0.5));
    }
    .dash-spark__svg path.area {
      fill: url(#dashSparkFill);
      opacity: 0;
      animation: dashFade 18s ease-out infinite;
    }
    @keyframes dashDraw {
      0%, 11%   { stroke-dashoffset: 1000; }
      45%       { stroke-dashoffset: 0; }
      95%       { stroke-dashoffset: 0; }
      99%, 100% { stroke-dashoffset: 1000; }
    }
    @keyframes dashFade {
      0%, 39%   { opacity: 0; }
      50%, 95%  { opacity: 1; }
      99%, 100% { opacity: 0; }
    }

    /* Funded stamp */
    .dash-funded {
      position: absolute;
      right: 22px; top: 74px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      padding: 8px 14px;
      border: 2px solid #14b8a6;
      color: #14b8a6;
      border-radius: 6px;
      transform: rotate(-8deg) scale(.6);
      opacity: 0;
      animation: dashStamp 18s cubic-bezier(.2,1.5,.3,1) infinite;
      text-shadow: 0 0 10px rgba(20,184,166,0.5);
      box-shadow: 0 0 24px rgba(20,184,166,0.3), inset 0 0 8px rgba(20,184,166,0.2);
    }
    @keyframes dashStamp {
      0%, 75%   { opacity: 0; transform: rotate(-8deg) scale(1.8); }
      80%, 95%  { opacity: 1; transform: rotate(-8deg) scale(1); }
      99%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); }
    }

    @media (max-width: 860px) {
      .dash-demo__body { grid-template-columns: 1fr; }
      .dash-challenge, .dash-spark { grid-column: span 1; }
      .pipe-demo__body { padding: 18px 16px; font-size: 12px; }
      .pipe-line .name { min-width: 120px; }
    }

    html { scroll-behavior: smooth; }

    /* Payouts */
    .payouts-section { background: linear-gradient(180deg, transparent, rgba(45,212,191,0.03)); }
    .payouts-head { text-align: center; margin-bottom: 40px; }
    .payouts-head .section-tag { display: inline-block; }
    .payouts-head .section-desc { margin-left: auto; margin-right: auto; }
    .payouts-stats {
      display: flex;
      justify-content: center;
      gap: 56px;
      margin: 32px 0 48px;
      flex-wrap: wrap;
    }
    .payouts-stat { text-align: center; }
    .payouts-stat-value {
      font-family: 'JetBrains Mono', monospace;
      font-size: 36px;
      font-weight: 800;
      background: var(--gradient-text);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .payouts-stat-label {
      font-size: 12px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 600;
      margin-top: 4px;
    }
    .payouts-reel {
      overflow: hidden; position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
    .payouts-track { display: flex; width: max-content; animation: reelScroll 60s linear infinite; }
    .payouts-reel:hover .payouts-track { animation-play-state: paused; }
    @keyframes reelScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .payout-card {
      flex: 0 0 300px; margin-right: 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
    }
    .payout-card:hover {
      border-color: var(--border-glow);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(45,212,191,0.08);
    }
    .payout-card img { display: block; width: 100%; height: auto; }
    .payouts-note {
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      margin-top: 28px;
      font-style: italic;
    }
    @media (max-width: 900px) {
      .payouts-stats { gap: 28px; }
      .payouts-stat-value { font-size: 28px; }
    }
    @media (max-width: 560px) {
      .payout-card { flex-basis: 240px; }
    }

/* Funnel pillars (landing teaser -> tools/papers/strategies) */
.pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:36px; }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }
.pillar {
  display:block; padding:26px 24px; border:1px solid var(--border); border-radius:18px;
  background:linear-gradient(180deg, rgba(20,184,166,0.05), rgba(255,255,255,0.01));
  color:inherit; text-decoration:none; transition:border-color .18s, transform .18s, background .18s;
}
.pillar:hover { border-color:var(--border-glow); transform:translateY(-3px); background:linear-gradient(180deg, rgba(20,184,166,0.10), rgba(255,255,255,0.01)); }
.pillar__k { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); }
.pillar__t { font-family:var(--display); font-size:19px; font-weight:700; line-height:1.3; margin:12px 0 18px; color:var(--text); letter-spacing:-.01em; }
.pillar__go { font-size:14px; font-weight:600; color:var(--cyan); }
.pillar__go span { display:inline-block; transition:transform .18s; }
.pillar:hover .pillar__go span { transform:translateX(4px); }

/* Mobile hero fit — voorkomt horizontale overflow op smalle schermen */
@media (max-width: 560px) {
  .hero-eyebrow { white-space: normal; max-width: 90%; text-align: center; line-height: 1.45; }
  .hero-eyebrow__dot { flex: 0 0 auto; }
  .tagline { font-size: 16px; }
  .hero-actions { gap: 12px; }
  .hero-trust { gap: 16px 22px; margin-top: 34px; padding-top: 24px; }
  .hero-trust__item b { font-size: 18px; }
  .pillars { gap: 12px; }
}
html, body { max-width: 100%; overflow-x: hidden; }

/* Combiner callout (tools page) */
.combiner-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background: linear-gradient(120deg, rgba(20,184,166,0.12), rgba(8,145,178,0.05));
  border:1px solid var(--border-glow); border-radius:20px; padding:26px 28px; text-decoration:none; color:inherit; transition:.18s; }
.combiner-callout:hover { border-color:var(--cyan); transform:translateY(-2px); }
.combiner-callout__go { white-space:nowrap; font-weight:700; color:var(--cyan); }
.combiner-callout__go span { display:inline-block; transition:margin .18s; }
.combiner-callout:hover .combiner-callout__go span { margin-left:4px; }

/* Landing portfolio-showcase */
.pf-section { padding: 40px 0 20px; }
.pf-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
@media (max-width:820px){ .pf-cards { grid-template-columns:1fr; } }
.pf-card { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:18px; padding:22px;
  background:linear-gradient(180deg, rgba(20,184,166,0.06), rgba(255,255,255,0.01)); transition:.18s; }
.pf-card:hover { border-color:var(--cyan); transform:translateY(-3px); }
.pf-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; color:#04110f;
  background:linear-gradient(135deg,#2dd4bf,#14b8a6); border-radius:999px; padding:4px 11px; margin-bottom:14px; }
.pf-name { font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.pf-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:16px 0 4px; }
.pf-stats b { display:block; font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:700; }
.pf-stats span { font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.pf-foot { font-size:11.5px; color:var(--muted); margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.pf-go { color:var(--cyan); font-weight:600; float:right; }
.pf-cta { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:28px; }