.tf-sec{padding-top:90px}
  .tf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  @media (max-width:980px){.tf-cards{grid-template-columns:1fr}}
  .tf-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;
    background:var(--card);display:flex;flex-direction:column;
    transition:border-color .25s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
  .tf-card:hover{border-color:color-mix(in oklch, var(--cyan), transparent 50%);
    transform:translateY(-4px);box-shadow:0 18px 50px color-mix(in oklch, var(--cyan), transparent 86%)}

  /* Stage: two stacked scenes, "after" clipped by --rev */
  .tf-stage{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:ew-resize;
    background:#0a0a10;user-select:none}
  .tf-scene{position:absolute;inset:0}
  .tf-scene .tf-bg{position:absolute;inset:0;background-size:cover;background-position:center}
  .tf-after{clip-path:inset(0 0 0 var(--rev,50%))}
  .tf-before{clip-path:inset(0 calc(100% - var(--rev,50%)) 0 0)}
  /* The fake screens drawn on the "after" scene */
  .tf-screen{position:absolute;border:2px solid #050507;border-radius:3px;overflow:hidden;
    box-shadow:0 0 0 1px rgba(0,240,255,.5), 0 6px 22px rgba(0,0,0,.6);
    background:#08080c}
  .tf-screen .tf-screen-img{position:absolute;inset:0;background-size:cover;background-position:center}
  .tf-screen::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%)}

  /* Divider handle */
  .tf-divider{position:absolute;top:0;bottom:0;width:2px;background:var(--cyan);
    left:var(--rev,50%);transform:translateX(-1px);z-index:4;pointer-events:none;
    box-shadow:0 0 14px var(--cyan)}
  .tf-divider::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:34px;height:34px;border-radius:50%;background:var(--cyan);
    box-shadow:0 2px 10px rgba(0,0,0,.4)}
  .tf-divider::after{content:"⇄";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    color:#000;font-size:15px;font-weight:700;z-index:1}
  .tf-tag{position:absolute;top:12px;z-index:3;font-family:"JetBrains Mono",monospace;
    font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
    background:rgba(5,5,7,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.14);color:#fff}
  .tf-tag.l{left:12px}
  .tf-tag.r{right:12px;color:var(--cyan);border-color:color-mix(in oklch, var(--cyan), transparent 50%)}

  .tf-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
  .tf-body .tf-kicker{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--cyan)}
  .tf-body h3{font-size:22px;letter-spacing:-.02em;font-weight:500;margin:0;color:var(--fg)}
  .tf-body p{font-size:13.5px;line-height:1.5;color:var(--fg-dim);margin:0}
  .tf-body .tf-setup{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
    display:flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;
    font-size:11px;color:var(--fg);letter-spacing:.04em}
  .tf-body .tf-setup b{color:var(--cyan);font-weight:600}
  .tf-hint{text-align:center;font-family:"JetBrains Mono",monospace;font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);margin-top:14px}