/* ---------- Recommendation Engine showcase (features.html) ---------- */
.rec-engine{--re-ink:var(--navy-2);--re-muted:var(--muted);--re-line:var(--border);
  --re-blue:var(--blue);--re-violet:#7657E8;--re-teal:#25B99A;--re-gold:var(--amber);
  --re-blue-dark:#1B3AAE;--re-violet-dark:#5B3FC0;--re-teal-dark:#178C72;--re-gold-dark:#C98A05;
  background:var(--surface);padding:56px 0}
.rec-engine .sec-head{margin-bottom:24px}
.rec-engine .sec-head p{font-size:15px}
.rec-engine .f-frame{transform:none}
.re-scene{
  position:relative;overflow:hidden;height:440px;
  font-family:var(--font-body);color:var(--re-ink);
  background:radial-gradient(circle at 50% 46%,#fff 0,var(--surface) 60%,#eef2f9 100%);
}
.re-scene:before{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(var(--re-line) 1px,transparent 1px),linear-gradient(90deg,var(--re-line) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at 50% 46%,#000 18%,transparent 82%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,#000 18%,transparent 82%);
}
.re-head{position:absolute;top:4.5%;left:0;width:100%;text-align:center;z-index:5}
.re-title{margin:0;font-family:var(--font-display);font-size:26px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--re-ink)}
.re-title span{color:var(--re-violet)}
.re-sub{margin-top:7px;color:var(--re-muted);font-size:12px}
.re-steps{display:flex;justify-content:center;gap:8px;margin-top:10px}
.re-step{padding:4px 10px;border:1px solid var(--re-line);border-radius:99px;background:#fff;color:#A0ACBD;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;transition:.35s}
.re-step.on{color:var(--re-ink);border-color:#BDB0F6;box-shadow:0 0 0 3px rgba(118,87,232,.09)}
.re-step.done{color:var(--re-teal);border-color:#BFE8DF}

.re-flow{position:absolute;left:4%;right:4%;top:20%;bottom:9%;display:grid;grid-template-columns:31% 38% 31%;z-index:2}
.re-col{position:relative;display:flex;flex-direction:column;justify-content:center}
.re-col-heading{text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;font-weight:700;color:#71819A}
.re-col-heading small{display:block;letter-spacing:0;font-family:var(--font-body);font-size:9px;font-weight:400;color:#A0ADBD;margin-top:4px}
.re-list{margin-top:8px;display:flex;flex-direction:column;gap:7px;padding:4px 14px;border-radius:16px;transition:background-color .3s}
#re-inputs{padding-left:16px;background:rgba(40,81,230,.045)}
#re-outputs{padding-right:16px;background:rgba(37,185,154,.045)}
.re-card{
  min-height:40px;border:1px solid var(--re-line);border-radius:12px;background:rgba(255,255,255,.92);
  display:flex;align-items:center;margin:0 2px;padding:6px 12px;gap:9px;position:relative;
  box-shadow:0 5px 18px rgba(11,33,72,.04);opacity:.55;transform:translateX(-8px);transition:.45s;
}
.re-card.show{opacity:1;transform:none;box-shadow:0 9px 25px rgba(11,33,72,.08)}
.re-card:after{content:"";position:absolute;right:-4px;width:7px;height:7px;border-radius:50%;background:#DBE4EF;transition:.25s}
.re-card.show:after{background:var(--re-blue-dark)}
.re-ico{width:24px;height:24px;border-radius:8px;background:var(--blue-tint);color:var(--re-blue);display:grid;place-items:center;font-family:var(--font-mono);font-size:8px;font-weight:800;flex:none}
.re-card b{font-size:10px;font-weight:700}
.re-card small{display:block;color:#96A2B4;font-size:7.5px;margin-top:1px}
.re-output .re-card{transform:translateX(8px);border-radius:10px}
.re-output .re-ico{background:#E4F5F1;color:var(--re-teal-dark)}
.re-output .re-card.show{border-color:#BFE8DF}
.re-output .re-card.show:after{background:var(--re-teal-dark)}
.re-output .re-consent.show{border-color:var(--re-gold-dark);background:#FFF8E8}
.re-output .re-consent.show:after{background:var(--re-gold-dark)}
.re-center{align-items:center;justify-content:center}

.re-engine-box{
  width:210px;height:210px;border-radius:24px;background:rgba(255,255,255,.92);
  border:1px solid #D3DDF3;box-shadow:0 20px 55px rgba(11,33,72,.1);position:relative;
  padding:12px 12px 10px;transition:.35s;
}
.re-engine-box.busy{border-color:#B7AAF3;box-shadow:0 0 0 4px rgba(118,87,232,.09),0 20px 55px rgba(11,33,72,.13)}
.re-engine-box.done{border-color:#B8E5DC;box-shadow:0 0 0 4px rgba(37,185,154,.08),0 20px 55px rgba(11,33,72,.13)}
.re-engine-title{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;font-weight:800;color:#64748B}
.re-engine-title span{color:var(--re-violet)}
.re-net{height:130px;margin-top:4px}
.re-net svg{width:100%;height:100%;overflow:visible}
.re-edge{stroke:#B5C4DF;stroke-width:1.1;opacity:.38;transition:.18s}
.re-edge.hot{stroke:var(--re-violet-dark);opacity:1;stroke-width:1.8}
.re-node{stroke-width:1.4;transition:.18s}
.re-node.hot{stroke:rgba(11,33,72,.35);stroke-width:2.4}
.re-packet{fill:#fff;stroke:var(--re-violet-dark);stroke-width:1.5}
.re-status{text-align:center;font-size:9px;color:#96A2B3;min-height:13px}
.re-status b{color:var(--re-violet)}
.re-modules{display:flex;gap:6px;margin-top:8px}
.re-module{flex:1;padding:7px 3px;border:1px solid var(--re-line);border-radius:9px;text-align:center;background:#fff;color:#9AA6B7;font-size:7px;transition:.3s}
.re-module b{display:block;color:#53627C;font-size:8px;margin-bottom:2px}
.re-module.on{border-color:#C9C0F7;box-shadow:0 5px 15px rgba(118,87,232,.11);color:#6653C8}

.re-bridge{position:absolute;height:1px;background:#D8E2EF;top:50%;z-index:1;width:10%;transition:background-color .3s}
.re-bridge.right{right:31%}
.re-bridge.hot{background:var(--re-blue-dark)}
.re-bridge.green.hot{background:var(--re-teal-dark)}
.re-bridge i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--re-blue-dark);opacity:0}
.re-bridge.green i{background:var(--re-teal-dark)}
.re-bridge.run i{opacity:1;animation:re-travel 1.05s linear infinite}
#re-fan-in,#re-fan-out{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.re-fanline{fill:none;stroke:#D8E2EF;stroke-width:1.3;opacity:.8;transition:stroke .3s,opacity .3s}
.re-fanline.hot{stroke:var(--re-blue-dark);opacity:1}
.re-fandot{fill:var(--re-blue-dark);display:none}
.re-fanline.out.hot{stroke:var(--re-teal-dark)}
.re-fandot.out{fill:var(--re-teal-dark)}
@keyframes re-travel{to{left:calc(100% - 7px)}}
@keyframes re-consent-pulse{50%{border-color:var(--re-gold-dark);background:#FFF3D8}}

.re-foot{position:absolute;bottom:2.5%;left:0;width:100%;text-align:center;color:#9BA7B8;font-size:8px;z-index:5}
.re-foot b{color:var(--re-ink)}

@media(max-width:900px){
  .re-title{font-size:20px}
  .re-sub{font-size:10px}
  .re-flow{top:22%;grid-template-columns:29% 42% 29%}
  .re-list{padding:6px 10px;gap:7px}
  #re-inputs{padding-left:12px}
  #re-outputs{padding-right:12px}
  .re-card{min-height:36px;padding:7px 9px}
  .re-card small{display:none}
  .re-card b{font-size:9px}
  .re-engine-box{width:190px;height:190px}
  .re-net{height:115px}
  .re-modules{display:none}
}
@media(max-width:640px){
  .re-scene{height:auto;padding-bottom:20px}
  .re-head{position:relative;top:auto;padding-top:22px}
  .re-flow{position:relative;top:auto;bottom:auto;left:0;right:0;grid-template-columns:1fr;gap:26px;padding:20px 5% 0}
  .re-bridge,#re-fan-in,#re-fan-out{display:none}
  .re-engine-box{width:100%;max-width:260px;margin:0 auto}
  .re-foot{position:relative;bottom:auto;padding:18px 6% 0}
}