/* eVitalyst AI story section (home + ai.html) */
  /* ---------- AI story ---------- */
  .story {
    position: relative; overflow: hidden; color: #fff; padding-top: 110px; padding-bottom: 110px;
    background:
      radial-gradient(ellipse 60% 40% at 15% 0%, rgba(163, 18, 95, .55), transparent 70%),
      radial-gradient(ellipse 50% 35% at 95% 25%, rgba(124, 58, 237, .40), transparent 70%),
      radial-gradient(ellipse 60% 30% at 50% 100%, rgba(163, 18, 95, .30), transparent 70%),
      #13001d;
  }
  .story::before { /* faint grid */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  }
  .story .wrap { position: relative; }
  .story .eyebrow { background: rgba(255,255,255,.09); color: #ffb3d9; border: 1px solid rgba(255,255,255,.12); }
  .story .sec-head h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -1px; }
  .story .sec-head h2 em, .story .sw-head h3 em {
    font-style: normal; background: linear-gradient(90deg, #ff7ac0, #b18cff); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .story .lead { color: rgba(255,255,255,.72); font-size: 17px; max-width: 720px; }

  /* Hub diagram */
  .hub { max-width: 1100px; margin: 10px auto 120px; }
  .hub svg { width: 100%; height: auto; display: block; overflow: visible; }
  .hub text { font-family: inherit; }
  .hub .pulse { transform-origin: 550px 280px; animation: pulse 3.2s ease-out infinite; }
  .hub .pulse.p2 { animation-delay: 1.6s; }
  @keyframes pulse { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
  .hub .src, .hub .out { transition: transform .2s; }
  .hub-m { display: none; }

  /* Scenes */
  .scene { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: center; margin-bottom: 120px; }
  .scene > * { min-width: 0; }
  .scene.rev .copy { order: 2; }
  .step { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: 2.5px; font-weight: 700; color: #ff9fd0; }
  .step b { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #a3125f, #7c3aed); display: grid; place-items: center; color: #fff; letter-spacing: 0; font-size: 14px; }
  .copy h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; margin-top: 18px; line-height: 1.15; letter-spacing: -.6px; }
  .copy p { color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.6; margin-top: 14px; }
  .copy ul { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
  .copy li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: rgba(255,255,255,.9); }
  .copy .ck { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,122,192,.16); color: #ff9fd0; flex-shrink: 0; }
  .copy .ck svg.i { width: 13px; height: 13px; stroke-width: 3.2; }

  .mock-wrap { position: relative; }
  .mock-wrap::before {
    content: ""; position: absolute; inset: -40px; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(177, 140, 255, .35), rgba(255, 122, 192, .15) 60%, transparent);
    filter: blur(20px);
  }
  .mock {
    position: relative; z-index: 1; background: #fff; color: var(--ink); border-radius: 18px; overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  }
  .mbar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #faf8fb; font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .mbar svg.ev-m { width: 22px; height: 13px; fill: initial; stroke: none; }
  .mbar > i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
  .mbar > i:nth-child(2) { background: #febc2e; } .mbar > i:nth-child(3) { background: #28c840; }
  .mbar span { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; }
  .mbar span svg.i { width: 15px; height: 15px; color: var(--brand-700); }
  .mbar em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 600; color: #b45309; background: #fef3c7; padding: 3px 9px; border-radius: 999px; }
  .mbody { padding: 20px; }
  .mini { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: linear-gradient(135deg, #8e0a56, #6d28d9); color: #fff; }
  .mini.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
  .mini svg.i { width: 13px; height: 13px; }
  .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Chat mock */
  .chat { min-height: 360px; }
  .msg { max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; opacity: 0; }
  .msg.user { margin-left: auto; width: fit-content; background: linear-gradient(135deg, #8e0a56, #6d28d9); color: #fff; border-bottom-right-radius: 4px; }
  .msg.ai { background: var(--bg-soft); border: 1px solid var(--line); border-bottom-left-radius: 4px; margin-top: 12px; }
  .typing { display: flex; gap: 4px; width: fit-content; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; margin-top: 12px; opacity: 0; max-height: 44px; overflow: hidden; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: #b3a9bb; animation: blink 1s infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes blink { 50% { opacity: .25; } }
  .play .msg.user { animation: msgIn .4s ease .3s forwards; }
  .play .typing { animation: typing 1.3s ease .9s forwards; }
  @keyframes typing { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; max-height: 0; padding: 0 14px; margin: 0; border-width: 0; } }
  .play .msg.ai { animation: msgIn .45s ease 2.2s forwards; }
  .mt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
  .mt td { padding: 7px 4px; border-top: 1px solid var(--line); }
  .mt td:last-child { text-align: right; }
  .due { font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
  .due.red { background: #fee2e2; color: #b91c1c; } .due.amber { background: #fef3c7; color: #b45309; }
  .ask-bar { margin-top: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 14px; color: #9a93a3; font-size: 14px; }
  .ask-bar .send { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8e0a56, #6d28d9); }
  .ask-bar .send svg.i { width: 16px; height: 16px; }

  /* Dashboard mock */
  .prompt { display: flex; align-items: center; gap: 10px; border: 1.5px solid #e4d4ef; border-radius: 12px; padding: 8px 8px 8px 12px; font-size: 14px; }
  .prompt .spark { width: 18px; height: 18px; color: #7c3aed; }
  .typed { flex: 1; white-space: nowrap; overflow: hidden; clip-path: inset(0 100% 0 0); }
  .play .typed { animation: typeIn 1.5s steps(36) .3s forwards; }
  @keyframes typeIn { to { clip-path: inset(0 0 0 0); } }
  .gen { font-size: 12.5px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 9px; background: linear-gradient(135deg, #8e0a56, #6d28d9); }
  .chart { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; opacity: 0; }
  .play .chart { animation: msgIn .5s ease 1.9s forwards; }
  .chart-h { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .pill { font-size: 11px; font-weight: 600; color: #7c3aed; background: #f3ebff; padding: 3px 9px; border-radius: 999px; }
  .pin-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink); transition: all .2s; }
  .pin-btn svg.i { width: 13px; height: 13px; }
  .pin-btn.done { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
  .bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; margin-top: 14px; border-bottom: 1px solid var(--line); padding: 0 4px; }
  .bar { flex: 1; height: 0; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #d7b8f5, #b794e8); }
  .bar.hi { background: linear-gradient(180deg, #a3125f, #7c3aed); }
  .play .bar { animation: grow .8s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(2.3s + var(--n) * .08s); }
  @keyframes grow { to { height: var(--h); } }
  .months { display: flex; gap: 14px; padding: 6px 4px 0; }
  .months span { flex: 1; text-align: center; font-size: 11.5px; color: #9a93a3; }
  .pins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; opacity: 0; }
  .play .pins { animation: msgIn .5s ease 3s forwards; }
  .kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg-soft); }
  .kpi small { display: block; font-size: 11.5px; color: var(--ink-2); }
  .kpi b { font-size: 19px; font-weight: 700; }
  .kpi b.neg { color: #b91c1c; }
  .toast { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 20px); opacity: 0; display: flex; align-items: center; gap: 8px; background: #1d1a22; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); transition: all .35s; pointer-events: none; }
  .toast svg.i { width: 15px; height: 15px; color: #4ade80; }
  .toast.show { opacity: 1; transform: translate(-50%, 0); }

  /* Data-entry mock */
  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .3px; }
  .form label span { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: #fff; transition: all .3s; }
  .form .hot span { border-color: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
  .form .ok span { border-color: #10b981; box-shadow: 0 0 0 3px #d1fae5; }
  .insight { display: flex; gap: 12px; margin-top: 14px; padding: 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; background: linear-gradient(135deg, #fff7ed, #fdf2f8); border: 1px solid #fbd5b5; opacity: 0; }
  .insight.warn { background: #eff6ff; border-color: #bfdbfe; }
  .insight.done { background: #ecfdf5; border-color: #a7f3d0; }
  .play .insight { animation: msgIn .5s ease 1s forwards; }
  .play .insight.warn { animation-delay: 1.8s; }
  .ai-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; background: linear-gradient(135deg, #a3125f, #7c3aed); }
  .insight.warn .ai-ic { background: #2563eb; }
  .insight.done .ai-ic { background: #10b981; }
  .ai-ic svg.i { width: 16px; height: 16px; }

  /* Strengths / weaknesses / potential */
  .sw-head { margin-top: 20px; margin-bottom: 40px; }
  .sw-head h3 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -.6px; }
  .sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .swc { position: relative; overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px 28px; transition: transform .25s, border-color .25s, background .25s; }
  .swc::after { content: ""; position: absolute; width: 220px; height: 220px; right: -90px; top: -90px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); }
  .swc:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255,255,255,.07); }
  .swi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
  .swc h4 { font-size: 21px; font-weight: 700; margin-top: 18px; }
  .swc ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
  .swc li { position: relative; padding-left: 18px; font-size: 15px; color: rgba(255,255,255,.78); line-height: 1.45; }
  .swc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
  .story-cta { text-align: center; margin-top: 70px; }
  .story-cta p { font-size: 22px; color: rgba(255,255,255,.8); }
  .story-cta p b { color: #fff; }
  .story-cta > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
  .btn-w, .btn-g { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .2s, background .2s; }
  .btn-w { background: #fff; color: var(--brand-800); }
  .btn-g { border: 1px solid rgba(255,255,255,.3); color: #fff; }
  .btn-w:hover, .btn-g:hover { transform: translateY(-2px); }
  .btn-g:hover { background: rgba(255,255,255,.08); }
  .btn-w svg.i, .btn-g svg.i { width: 18px; height: 18px; }

  @media (max-width: 900px) {
    .scene { grid-template-columns: 1fr; gap: 40px; margin-bottom: 90px; }
    .scene.rev .copy { order: 0; }
    .sw { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .story { padding-top: 80px; padding-bottom: 80px; }
    .hub { display: none; }
    .hub-m { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 80px; }
    .hm-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .hm-in span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 13px; line-height: 1.25; }
    .hm-in i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
    .hm-in i svg.i { width: 14px; height: 14px; }
    .hm-arrow { color: #ff9fd0; }
    .hm-core .hm-word { height: 20px; width: auto; fill: #fff; }
    .hm-core { display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #c0268a, #5b21b6); box-shadow: 0 0 40px rgba(192, 38, 138, .5); }
    .hm-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
    .hm-out span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 12px; color: rgba(255,255,255,.7); }
    .hm-out b { color: #fff; font-size: 16px; }
    .hm-out i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #c0268a, #5b21b6); color: #fff; }
    .hm-out i svg.i { width: 17px; height: 17px; }
    .mbody { padding: 14px; }
    .form { grid-template-columns: 1fr; }
    .kpi b { font-size: 15px; }
    .bars, .months { gap: 8px; }
    .mock-wrap::before { inset: -16px; }
    .story-cta p { font-size: 19px; }
  }