/* =====================================================
   IncubaOS — Feature Simulations (minimalist white style)
   Hand-styled but clean, matching the website aesthetic.
   ===================================================== */

:root {
  --wf-paper: #ffffff;
  --wf-ink:   #1A2233;
  --wf-muted: #B8BCC4;
  --wf-fill:  #F4F6F9;
  --wf-fill2: #E9EDF3;
  --wf-border:#E9EDF3;
  --wf-accent:#E61B47;
}

.sim-popover {
  position: absolute;
  width: 380px;
  background: var(--wf-paper);
  border: 1px solid var(--wf-border);
  border-radius: 20px;
  padding: 0;
  box-shadow:
    0 1px 2px rgba(26,34,51,.04),
    0 20px 40px rgba(26,34,51,.10),
    0 40px 80px rgba(26,34,51,.10);
  z-index: 9999;
  opacity: 0;
  transform: scale(.97) translateY(6px);
  transform-origin: 30% 20%;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2,.9,.25,1.1);
  pointer-events: none;
  font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  overflow: hidden;
}
.sim-popover.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.sim-frame {
  position: relative;
  height: 250px;
  overflow: hidden;
  background: var(--wf-fill);
}
.sim-cap {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--wf-border);
  font-family: 'Sora', 'Inter', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--wf-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: white;
}
.sim-cap::before {
  content:'';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wf-accent);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(230,27,71,.12);
  animation: simDot 1.8s ease-in-out infinite;
}
@keyframes simDot {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.3); }
}

/* ===== Wireframe primitives ===== */
.wf-screen {
  position: absolute;
  inset: 16px;
  background: #fff;
  border: 1px solid var(--wf-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(26,34,51,.04);
}
.wf-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--wf-border);
  background: white;
  flex-shrink: 0;
}
.wf-toolbar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wf-fill2); }
.wf-urlbar {
  flex: 1; height: 14px;
  background: var(--wf-fill);
  border-radius: 999px;
  margin-left: 8px;
}
.wf-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 9px; position: relative; overflow: hidden; }
.wf-line { height: 6px; background: var(--wf-fill); border-radius: 4px; }
.wf-line.short { width: 40%; }
.wf-line.mid   { width: 70%; }
.wf-handlabel {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--wf-ink);
  font-size: 11px;
  letter-spacing: .02em;
}

/* ====================================================
   SIM 1 · portal — White-label customization
   ==================================================== */
.sim-portal .wf-logo {
  width: 36px; height: 36px;
  background: var(--wf-fill);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--wf-ink);
  animation: portalLogo 6s ease-in-out infinite;
}
@keyframes portalLogo {
  0%,18%   { background: var(--wf-fill); color: var(--wf-ink); border-radius: 10px; }
  33%,50%  { background: var(--wf-accent); color: white; border-radius: 50%; }
  66%,83%  { background: var(--wf-ink); color: white; border-radius: 6px; }
  100%     { background: var(--wf-fill); color: var(--wf-ink); border-radius: 10px; }
}
.sim-portal .wf-header {
  height: 10px;
  background: var(--wf-ink);
  border-radius: 999px;
  margin-bottom: 4px;
  animation: portalHeader 6s ease-in-out infinite;
}
@keyframes portalHeader {
  0%,18%  { background: var(--wf-ink); }
  33%,50% { background: var(--wf-accent); }
  66%,83% { background: #2E5BFF; }
  100%    { background: var(--wf-ink); }
}
.sim-portal .wf-swatches {
  position: absolute;
  top: 60px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-portal .wf-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 1px var(--wf-border);
}
.sim-portal .wf-swatch.s1 { background: var(--wf-ink); }
.sim-portal .wf-swatch.s2 { background: var(--wf-accent); }
.sim-portal .wf-swatch.s3 { background: #2E5BFF; }
.sim-portal .wf-swatch::after {
  content:'';
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--wf-accent);
  border-radius: 50%;
  opacity: 0;
}
.sim-portal .wf-swatch.s1::after { animation: pickSwatch 6s ease-in-out 0s infinite; }
.sim-portal .wf-swatch.s2::after { animation: pickSwatch 6s ease-in-out 2s infinite; }
.sim-portal .wf-swatch.s3::after { animation: pickSwatch 6s ease-in-out 4s infinite; }
@keyframes pickSwatch {
  0%,5%   { opacity: 0; transform: scale(.7); }
  10%,28% { opacity: 1; transform: scale(1); }
  33%,100%{ opacity: 0; transform: scale(.7); }
}

/* ====================================================
   SIM 2 · form — Founder applications
   ==================================================== */
.sim-form .wf-field {
  height: 26px;
  border: 1px solid var(--wf-border);
  border-radius: 8px;
  background: var(--wf-fill);
  position: relative;
  overflow: hidden;
}
.sim-form .wf-field::after {
  content:'';
  position: absolute;
  left: 10px; top: 11px;
  height: 4px;
  width: 0;
  background: var(--wf-ink);
  border-radius: 2px;
}
.sim-form .wf-field:nth-child(2)::after { animation: formType 5s 0.2s ease-out infinite; max-width: 60%; }
.sim-form .wf-field:nth-child(3)::after { animation: formType 5s 0.9s ease-out infinite; max-width: 80%; }
.sim-form .wf-field:nth-child(4)::after { animation: formType 5s 1.6s ease-out infinite; max-width: 50%; }
.sim-form .wf-field:nth-child(5)::after { animation: formType 5s 2.3s ease-out infinite; max-width: 70%; }
@keyframes formType {
  0%,8%    { width: 0; opacity: 1; }
  18%,40%  { width: 70%; opacity: 1; }
  60%,100% { width: 70%; opacity: 0; }
}
.sim-form .wf-submit {
  align-self: flex-end;
  margin-top: auto;
  background: var(--wf-fill);
  color: var(--wf-muted);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 18px;
  border-radius: 999px;
  animation: formSubmit 5s ease-in-out infinite;
}
@keyframes formSubmit {
  0%,55%  { background: var(--wf-fill); color: var(--wf-muted); transform: scale(1); box-shadow: none; }
  65%,78% { background: var(--wf-accent); color: white; transform: scale(1.05); box-shadow: 0 6px 16px rgba(230,27,71,.3); }
  88%,100%{ background: var(--wf-fill); color: var(--wf-muted); transform: scale(1); box-shadow: none; }
}
.sim-form .wf-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.96);
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 14px;
  color: var(--wf-ink);
  font-weight: 600;
  opacity: 0;
  animation: formDone 5s ease-in-out infinite;
}
.sim-form .wf-check svg { width: 42px; height: 42px; }
@keyframes formDone {
  0%,78% { opacity: 0; }
  88%,98% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ====================================================
   SIM 3 · board — Kanban project board
   ==================================================== */
.sim-board .wf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  height: 100%;
}
.sim-board .wf-col {
  border-radius: 10px;
  background: var(--wf-fill);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.sim-board .wf-col-h {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  color: var(--wf-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
  text-align: center;
}
.sim-board .wf-card {
  background: white;
  border: 1px solid var(--wf-border);
  border-radius: 6px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(26,34,51,.03);
}
.sim-board .wf-card-l { height: 5px; background: var(--wf-fill2); border-radius: 3px; }
.sim-board .wf-card-l.short { width: 50%; }
.sim-board .wf-flyer {
  position: absolute;
  width: calc(33% - 8px);
  background: white;
  border: 1px solid var(--wf-accent);
  border-radius: 6px;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(230,27,71,.18);
  animation: boardFly 6s ease-in-out infinite;
}
.sim-board .wf-flyer .wf-card-l { background: rgba(230,27,71,.25); }
@keyframes boardFly {
  0%      { left: 18px; top: 38px; transform: rotate(0); }
  20%     { left: 18px; top: 38px; transform: rotate(0); }
  35%     { left: calc(33% + 10px); top: 40px; transform: rotate(1deg); }
  55%     { left: calc(33% + 10px); top: 40px; transform: rotate(1deg); }
  70%     { left: calc(66% + 2px); top: 38px; transform: rotate(-1deg); }
  100%    { left: calc(66% + 2px); top: 38px; transform: rotate(-1deg); }
}

/* ====================================================
   SIM 4 · dashboard — Admin dashboard
   ==================================================== */
.sim-dashboard .wf-statgrid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
}
.sim-dashboard .wf-stat {
  border-radius: 8px;
  padding: 7px 6px;
  background: var(--wf-fill);
  text-align: center;
}
.sim-dashboard .wf-stat .n {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--wf-ink);
  display: block;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(6px);
  animation: statPop .5s ease-out forwards;
}
.sim-dashboard .wf-stat .l {
  font-size: 8.5px;
  color: var(--wf-muted);
  margin-top: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sim-dashboard .wf-stat:nth-child(1) .n { animation-delay: .15s; }
.sim-dashboard .wf-stat:nth-child(2) .n { animation-delay: .30s; }
.sim-dashboard .wf-stat:nth-child(3) .n { animation-delay: .45s; }
.sim-dashboard .wf-stat:nth-child(4) .n { animation-delay: .60s; }
@keyframes statPop {
  to { opacity: 1; transform: translateY(0); }
}
.sim-dashboard .wf-chartwrap {
  border-radius: 8px;
  background: var(--wf-fill);
  padding: 10px;
  flex: 1;
  position: relative;
}
.sim-dashboard .wf-line-svg { width: 100%; height: 100%; display: block; }
.sim-dashboard .wf-line-svg path.line {
  stroke: var(--wf-accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: drawLine 3s ease-out 0.2s infinite;
}
@keyframes drawLine {
  0%,5%    { stroke-dashoffset: 320; }
  60%,100% { stroke-dashoffset: 0; }
}
.sim-dashboard .wf-line-svg path.fill {
  fill: rgba(230,27,71,.10);
  opacity: 0;
  animation: drawFill 3s ease-out 0.2s infinite;
}
@keyframes drawFill {
  0%,40%   { opacity: 0; }
  80%,100% { opacity: 1; }
}

/* ====================================================
   SIM 5 · events — Events list
   ==================================================== */
.sim-events .wf-event {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--wf-fill);
  border-radius: 10px;
  padding: 8px 10px 8px 8px;
  opacity: 0;
  transform: translateY(8px);
}
.sim-events .wf-event:nth-child(1) { animation: eventSlide 5s 0.2s ease-out infinite both; }
.sim-events .wf-event:nth-child(2) { animation: eventSlide 5s 0.6s ease-out infinite both; }
.sim-events .wf-event:nth-child(3) { animation: eventSlide 5s 1.0s ease-out infinite both; }
.sim-events .wf-event:nth-child(4) { animation: eventSlide 5s 1.4s ease-out infinite both; }
@keyframes eventSlide {
  0%      { opacity: 0; transform: translateY(8px); }
  15%,75% { opacity: 1; transform: translateY(0); }
  95%,100%{ opacity: 0; transform: translateY(-4px); }
}
.sim-events .wf-date {
  width: 34px;
  background: white;
  border-radius: 6px;
  text-align: center;
  padding: 4px 0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(26,34,51,.05);
}
.sim-events .wf-date .d {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--wf-accent);
}
.sim-events .wf-date .m {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wf-muted);
  margin-top: 2px;
}
.sim-events .wf-event-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sim-events .wf-event-info .ttl {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--wf-ink);
  line-height: 1;
}
.sim-events .wf-event-info .sub { height: 4px; width: 70%; background: var(--wf-fill2); border-radius: 2px; }

/* ====================================================
   SIM 6 · chart — Analytics
   ==================================================== */
.sim-chart .wf-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  height: 100%;
}
.sim-chart .wf-bars {
  border-radius: 8px;
  background: var(--wf-fill);
  padding: 14px 12px 10px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.sim-chart .wf-bar {
  flex: 1;
  background: var(--wf-fill2);
  border-radius: 3px 3px 0 0;
  height: 0;
  animation: barGrow 3.5s ease-out infinite;
}
.sim-chart .wf-bar:nth-child(1) { animation-delay: .2s; --h: 35%; }
.sim-chart .wf-bar:nth-child(2) { animation-delay: .35s; --h: 55%; }
.sim-chart .wf-bar:nth-child(3) { animation-delay: .5s; --h: 45%; background: var(--wf-accent); }
.sim-chart .wf-bar:nth-child(4) { animation-delay: .65s; --h: 75%; }
.sim-chart .wf-bar:nth-child(5) { animation-delay: .8s; --h: 90%; background: var(--wf-accent); }
.sim-chart .wf-bar:nth-child(6) { animation-delay: .95s; --h: 70%; }
@keyframes barGrow {
  0%,10%   { height: 0; }
  40%,85%  { height: var(--h); }
  95%,100% { height: 0; }
}
.sim-chart .wf-donut {
  border-radius: 8px;
  background: var(--wf-fill);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sim-chart .wf-donut svg { width: 64px; height: 64px; }
.sim-chart .wf-donut .ring {
  fill: none;
  stroke: var(--wf-fill2);
  stroke-width: 5;
}
.sim-chart .wf-donut .arc {
  fill: none;
  stroke: var(--wf-accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: donutArc 3.5s ease-out infinite;
}
@keyframes donutArc {
  0%,10%   { stroke-dashoffset: 138; }
  60%,90%  { stroke-dashoffset: 42; }
  100%     { stroke-dashoffset: 138; }
}
.sim-chart .wf-donut .num {
  position: absolute;
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--wf-ink);
  letter-spacing: -.02em;
  animation: donutNum 3.5s ease-out infinite;
}
@keyframes donutNum {
  0%,10%  { opacity: 0; }
  60%,90% { opacity: 1; }
  100%    { opacity: 0; }
}

/* ====================================================
   SIM 7 · sfrim — S-FRIM diagnostic
   ==================================================== */
.sim-sfrim .wf-q {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--wf-ink);
  line-height: 1.35;
}
.sim-sfrim .wf-opts { display: flex; flex-direction: column; gap: 5px; }
.sim-sfrim .wf-opt {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--wf-border);
  border-radius: 8px;
  padding: 6px 10px;
  background: white;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--wf-ink);
  position: relative;
  transition: all .3s;
}
.sim-sfrim .wf-opt::before {
  content:'';
  width: 11px; height: 11px;
  border: 1.5px solid var(--wf-fill2);
  border-radius: 50%;
  background: white;
  transition: all .3s;
}
.sim-sfrim .wf-opt.pick { animation: sfrimPick 5s ease-in-out infinite; }
.sim-sfrim .wf-opt.pick::before { animation: sfrimDot 5s ease-in-out infinite; }
@keyframes sfrimPick {
  0%,30%   { background: white; border-color: var(--wf-border); }
  45%,75%  { background: rgba(230,27,71,.06); border-color: var(--wf-accent); }
  95%,100% { background: white; border-color: var(--wf-border); }
}
@keyframes sfrimDot {
  0%,30%   { background: white; border-color: var(--wf-fill2); box-shadow: none; }
  45%,75%  { background: var(--wf-accent); border-color: var(--wf-accent); box-shadow: inset 0 0 0 2px white; }
  95%,100% { background: white; border-color: var(--wf-fill2); box-shadow: none; }
}
.sim-sfrim .wf-score {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--wf-fill);
}
.sim-sfrim .wf-score .lbl {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--wf-ink);
  white-space: nowrap;
}
.sim-sfrim .wf-meter {
  flex: 1;
  height: 6px;
  background: var(--wf-fill2);
  border-radius: 999px;
  overflow: hidden;
}
.sim-sfrim .wf-meter span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--wf-accent);
  border-radius: 999px;
  animation: sfrimMeter 5s ease-out infinite;
}
@keyframes sfrimMeter {
  0%,35%   { width: 0; }
  80%,95%  { width: 78%; }
  100%     { width: 0; }
}
.sim-sfrim .wf-pct {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--wf-accent);
  width: 36px;
  text-align: right;
  letter-spacing: -.02em;
  opacity: 0;
  animation: sfrimPct 5s ease-out infinite;
}
@keyframes sfrimPct {
  0%,35%   { opacity: 0; }
  60%,95%  { opacity: 1; }
  100%     { opacity: 0; }
}

/* ====================================================
   SIM 8 · ai — AI suggestion
   ==================================================== */
.sim-ai .wf-textarea {
  flex: 1;
  border-radius: 10px;
  background: var(--wf-fill);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}
.sim-ai .wf-textarea .ln {
  height: 5px;
  background: var(--wf-fill2);
  border-radius: 3px;
  opacity: 0;
}
.sim-ai .wf-textarea .ln:nth-child(2) { width: 90%; animation: aiType 5s 0.2s ease-out infinite both; }
.sim-ai .wf-textarea .ln:nth-child(3) { width: 75%; animation: aiType 5s 0.5s ease-out infinite both; }
.sim-ai .wf-textarea .ln:nth-child(4) { width: 85%; animation: aiType 5s 0.8s ease-out infinite both; }
.sim-ai .wf-textarea .ln:nth-child(5) { width: 60%; animation: aiType 5s 1.1s ease-out infinite both; }
@keyframes aiType {
  0%,8%    { opacity: 0; transform: translateX(-4px); }
  20%,80%  { opacity: 1; transform: translateX(0); }
  95%,100% { opacity: 0; transform: translateX(4px); }
}
.sim-ai .wf-suggest {
  position: absolute;
  right: 10px; bottom: 10px;
  background: var(--wf-ink);
  color: white;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transform: scale(.85) translateY(4px);
  transform-origin: bottom right;
  animation: aiSuggest 5s 1.6s ease-out infinite both;
  box-shadow: 0 8px 20px rgba(26,34,51,.18);
}
@keyframes aiSuggest {
  0%,12%   { opacity: 0; transform: scale(.85) translateY(4px); }
  25%,80%  { opacity: 1; transform: scale(1) translateY(0); }
  95%,100% { opacity: 0; transform: scale(.95) translateY(0); }
}
.sim-ai .wf-suggest .tag1 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
}
.sim-ai .wf-suggest .tag2 {
  font-size: 10px;
  color: rgba(255,255,255,.7);
}
.sim-ai .wf-suggest .tag2 b { color: var(--wf-accent); font-weight: 700; }
.sim-ai .wf-sparkles {
  position: absolute;
  top: 10px; right: 10px;
  color: var(--wf-accent);
  font-size: 14px;
  animation: aiSpark 1.4s ease-in-out infinite;
}
@keyframes aiSpark {
  0%,100% { opacity: .5; transform: scale(1) rotate(0); }
  50%     { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

/* ====================================================
   SIM 9 · support — Chat support
   ==================================================== */
.sim-support .wf-chat { display: flex; flex-direction: column; gap: 7px; height: 100%; }
.sim-support .wf-msg {
  max-width: 75%;
  padding: 7px 12px;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--wf-ink);
  opacity: 0;
  line-height: 1.35;
}
.sim-support .wf-msg.me {
  align-self: flex-end;
  background: var(--wf-fill);
  border-bottom-right-radius: 4px;
}
.sim-support .wf-msg.them {
  align-self: flex-start;
  background: var(--wf-accent);
  color: white;
  border-bottom-left-radius: 4px;
}
.sim-support .wf-msg:nth-child(1) { animation: chatPop 6s 0.2s ease-out infinite both; }
.sim-support .wf-msg:nth-child(2) { animation: chatPop 6s 1.6s ease-out infinite both; }
.sim-support .wf-msg:nth-child(3) { animation: chatPop 6s 3.0s ease-out infinite both; }
.sim-support .wf-typing {
  align-self: flex-start;
  background: var(--wf-fill);
  border-radius: 14px;
  padding: 7px 11px;
  display: inline-flex;
  gap: 3px;
  opacity: 0;
  animation: chatTyping 6s 2.3s ease-out infinite both;
}
.sim-support .wf-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wf-muted);
  animation: typingDot 1s ease-in-out infinite;
}
.sim-support .wf-typing span:nth-child(2) { animation-delay: .15s; }
.sim-support .wf-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot {
  0%,100% { opacity: .3; transform: translateY(0); }
  50%     { opacity: 1; transform: translateY(-2px); }
}
@keyframes chatPop {
  0%,5%    { opacity: 0; transform: translateY(6px) scale(.95); }
  10%,80%  { opacity: 1; transform: translateY(0) scale(1); }
  95%,100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes chatTyping {
  0%,5%    { opacity: 0; }
  10%,18%  { opacity: 1; }
  22%,100% { opacity: 0; }
}

/* ====================================================
   SIM 10 · cohort — Cohort timeline
   ==================================================== */
.sim-cohort .wf-stages {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  padding: 0 4px;
}
.sim-cohort .wf-stages::before {
  content:'';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--wf-fill2);
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 0;
}
.sim-cohort .wf-progress {
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: var(--wf-accent);
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 1;
  width: 0;
  animation: cohortProg 6s ease-in-out infinite;
}
@keyframes cohortProg {
  0%      { width: 0; }
  100%    { width: 84%; }
}
.sim-cohort .wf-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.sim-cohort .wf-stage .wf-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--wf-fill2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
  font-weight: 700;
}
.sim-cohort .wf-stage.done .wf-dot { background: var(--wf-accent); border-color: var(--wf-accent); }
.sim-cohort .wf-stage.now .wf-dot  { background: var(--wf-accent); border-color: var(--wf-accent); box-shadow: 0 0 0 4px rgba(230,27,71,.18); }
.sim-cohort .wf-stage .wf-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: var(--wf-muted);
  white-space: nowrap;
  letter-spacing: .01em;
}
.sim-cohort .wf-stage:nth-child(2) .wf-dot { animation: cohortDot 6s 0.4s ease-out infinite both; }
.sim-cohort .wf-stage:nth-child(3) .wf-dot { animation: cohortDot 6s 1.4s ease-out infinite both; }
.sim-cohort .wf-stage:nth-child(4) .wf-dot { animation: cohortDot 6s 2.4s ease-out infinite both; }
.sim-cohort .wf-stage:nth-child(5) .wf-dot { animation: cohortDot 6s 3.4s ease-out infinite both; }
.sim-cohort .wf-stage:nth-child(6) .wf-dot { animation: cohortDot 6s 4.4s ease-out infinite both; }
@keyframes cohortDot {
  0%      { background: white; border-color: var(--wf-fill2); }
  20%,100%{ background: var(--wf-accent); border-color: var(--wf-accent); }
}

/* ====================================================
   SIM 11 · workspaces — Multi-workspace tabs
   ==================================================== */
.sim-workspaces .wf-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--wf-border);
  background: white;
  padding: 0 6px;
}
.sim-workspaces .wf-tab {
  flex: 1;
  padding: 9px 4px 8px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wf-muted);
  text-align: center;
  background: transparent;
  border-radius: 0;
  position: relative;
  transition: color .3s;
}
.sim-workspaces .wf-tab::after {
  content:'';
  position: absolute;
  bottom: -1px; left: 8px; right: 8px;
  height: 2px;
  background: var(--wf-accent);
  border-radius: 999px;
  opacity: 0;
}
.sim-workspaces .wf-tab:nth-child(1) { animation: wsTab 8s 0s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(2) { animation: wsTab 8s 2s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(3) { animation: wsTab 8s 4s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(4) { animation: wsTab 8s 6s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(1)::after { animation: wsTabBar 8s 0s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(2)::after { animation: wsTabBar 8s 2s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(3)::after { animation: wsTabBar 8s 4s ease-in-out infinite; }
.sim-workspaces .wf-tab:nth-child(4)::after { animation: wsTabBar 8s 6s ease-in-out infinite; }
@keyframes wsTab {
  0%,1%   { color: var(--wf-ink); }
  24%,25% { color: var(--wf-muted); }
  100%    { color: var(--wf-muted); }
}
@keyframes wsTabBar {
  0%,1%   { opacity: 1; }
  24%,25% { opacity: 0; }
  100%    { opacity: 0; }
}
.sim-workspaces .wf-content {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.sim-workspaces .wf-content .label {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--wf-ink);
  letter-spacing: -.015em;
  position: absolute;
  top: 14px; left: 14px;
}
.sim-workspaces .wf-content .l1 { animation: wsLabel 8s 0s ease-in-out infinite; }
.sim-workspaces .wf-content .l2 { animation: wsLabel 8s 2s ease-in-out infinite; }
.sim-workspaces .wf-content .l3 { animation: wsLabel 8s 4s ease-in-out infinite; }
.sim-workspaces .wf-content .l4 { animation: wsLabel 8s 6s ease-in-out infinite; }
@keyframes wsLabel {
  0%,1%,24%,25% { opacity: 0; }
  4%,22%        { opacity: 1; }
  26%,100%      { opacity: 0; }
}
.sim-workspaces .wf-content .stuff {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
.sim-workspaces .wf-content .stuff div {
  height: 28px;
  background: var(--wf-fill);
  border-radius: 6px;
}

/* ====================================================
   SIM 12 · valorisation — Workflow stepper
   ==================================================== */
.sim-valorisation .wf-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0;
  padding: 0 10px;
}
.sim-valorisation .wf-step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sim-valorisation .wf-step .wf-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--wf-fill);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--wf-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all .3s;
}
.sim-valorisation .wf-step .wf-pill::before {
  content:'';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wf-fill2);
  flex-shrink: 0;
  transition: all .3s;
}
.sim-valorisation .wf-step:nth-child(1) .wf-pill { animation: valoStep 6s 0.2s ease-in-out infinite both; }
.sim-valorisation .wf-step:nth-child(3) .wf-pill { animation: valoStep 6s 1.4s ease-in-out infinite both; }
.sim-valorisation .wf-step:nth-child(5) .wf-pill { animation: valoStep 6s 2.6s ease-in-out infinite both; }
.sim-valorisation .wf-step:nth-child(7) .wf-pill { animation: valoStep 6s 3.8s ease-in-out infinite both; }
@keyframes valoStep {
  0%,5%    { background: var(--wf-fill); color: var(--wf-muted); transform: scale(1); box-shadow: none; }
  10%,90%  { background: var(--wf-accent); color: white; transform: scale(1.04); box-shadow: 0 6px 16px rgba(230,27,71,.25); }
  100%     { background: var(--wf-accent); color: white; transform: scale(1); box-shadow: none; }
}
.sim-valorisation .wf-step:nth-child(1) .wf-pill::before,
.sim-valorisation .wf-step:nth-child(3) .wf-pill::before,
.sim-valorisation .wf-step:nth-child(5) .wf-pill::before,
.sim-valorisation .wf-step:nth-child(7) .wf-pill::before {
  animation: valoDot 6s ease-in-out infinite both;
}
.sim-valorisation .wf-step:nth-child(3) .wf-pill::before { animation-delay: 1.4s; }
.sim-valorisation .wf-step:nth-child(5) .wf-pill::before { animation-delay: 2.6s; }
.sim-valorisation .wf-step:nth-child(7) .wf-pill::before { animation-delay: 3.8s; }
@keyframes valoDot {
  0%,5%   { background: var(--wf-fill2); }
  10%,100%{ background: white; }
}
.sim-valorisation .wf-connect {
  flex: 1;
  height: 2px;
  background: var(--wf-fill2);
  border-radius: 999px;
  min-width: 8px;
  max-width: 20px;
}

/* ====================================================
   SIM 13 · comms — Communications
   ==================================================== */
.sim-comms .wf-phone {
  width: 130px;
  height: 100%;
  margin: 0 auto;
  background: var(--wf-ink);
  border-radius: 22px;
  padding: 6px;
  position: relative;
}
.sim-comms .wf-phone-screen {
  background: white;
  border-radius: 16px;
  height: 100%;
  padding: 18px 10px 10px;
  position: relative;
  overflow: hidden;
}
.sim-comms .wf-phone-screen::before {
  content:'';
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 4px;
  background: var(--wf-ink);
  border-radius: 999px;
}
.sim-comms .wf-bubble {
  background: var(--wf-fill);
  border-radius: 12px 12px 12px 4px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--wf-ink);
  margin-bottom: 5px;
  opacity: 0;
  font-weight: 500;
  line-height: 1.3;
}
.sim-comms .wf-bubble:nth-child(1) { animation: commPop 6s 0.3s ease-out infinite both; }
.sim-comms .wf-bubble:nth-child(2) { animation: commPop 6s 1.0s ease-out infinite both; background: var(--wf-accent); color: white; }
.sim-comms .wf-bubble:nth-child(3) { animation: commPop 6s 1.7s ease-out infinite both; }
.sim-comms .wf-bubble:nth-child(4) { animation: commPop 6s 2.4s ease-out infinite both; background: var(--wf-accent); color: white; }
@keyframes commPop {
  0%,5%    { opacity: 0; transform: translateY(6px) scale(.94); }
  12%,80%  { opacity: 1; transform: translateY(0) scale(1); }
  92%,100% { opacity: 0; transform: translateY(-4px); }
}
.sim-comms .wf-blast {
  position: absolute;
  top: 18px; right: 12px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 600;
  color: var(--wf-accent);
  font-size: 11px;
  white-space: nowrap;
  background: white;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(230,27,71,.18);
  animation: blastPulse 1.6s ease-in-out infinite;
}
@keyframes blastPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* ====================================================
   Cursor hint on hoverable features
   ==================================================== */
.pk-list li[data-sim] {
  cursor: help;
  transition: color .15s, transform .15s;
}
.pk-list li[data-sim]:hover {
  color: var(--wf-accent);
  transform: translateX(2px);
}
.pk-featured .pk-list li[data-sim]:hover { color: var(--coral); }
html[dir="rtl"] .pk-list li[data-sim]:hover { transform: translateX(-2px); }

/* Mobile: no popover */
@media (max-width: 900px) {
  .sim-popover { display: none !important; }
}