/* Bento features block — LIGHT theme, adapted to the current site palette.
   Scoped to #features. Prototype only (light-features.html). */

#features .bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px; }
#features .bx{
  background:#fff; border:1px solid rgba(15,15,16,.08); border-radius:22px;
  padding:30px; display:flex; flex-direction:column; gap:12px; min-height:250px;
  position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(15,15,16,.03), 0 14px 34px -20px rgba(102,81,246,.22);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#features .bx:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -18px rgba(102,81,246,.30); border-color:rgba(102,81,246,.35); }
#features .bx .h3{ font-size:20px; letter-spacing:-.015em; font-weight:700; margin:0; color:#14141a; }
#features .bx .p{ margin:0; color:#56606a; font-size:15px; line-height:1.5; }
#features .bx .vis{ margin-top:auto; padding-top:18px; }

/* yellow accent card */
#features .bx.yl{ background:radial-gradient(120% 90% at 100% 0%,rgba(242,193,78,.16),transparent 60%), #fff; border-color:rgba(242,193,78,.55); }
#features .bx.yl .h3{ color:#b8860b; }

/* badges */
#features .bdg{ display:flex; gap:10px; flex-wrap:wrap; }
#features .bdg span{ display:flex; align-items:center; gap:8px; font-size:13px; padding:8px 12px 8px 8px; border-radius:999px; background:#fff; border:1px solid rgba(15,15,16,.10); color:#14141a; box-shadow:0 1px 2px rgba(15,15,16,.03); }
#features .ok{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#22c55e; color:#fff; font-size:11px; font-weight:700; }
#features .bdg .no{ background:#ef4444; color:#fff; }
#features .bdg .yl, #features .ok.yl{ background:#f2c14e; color:#3a2c05; }

/* templates */
#features .tpl{ display:flex; flex-direction:column; gap:8px; }
#features .tpl div{ font-size:12.5px; padding:10px 12px; border-radius:10px; background:#f6f5ff; border:1px solid rgba(102,81,246,.12); color:#3a3a44; }
#features .tpl div b{ color:#6651f6; font-weight:600; }

/* wave */
#features .wave{ display:flex; align-items:center; gap:3px; height:44px; }
#features .wave i{ flex:1; border-radius:2px; background:#6651f6; opacity:.85; animation:wv 2.4s ease-in-out infinite; }
@keyframes wv{ 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }

/* task */
#features .task{ display:flex; gap:10px; align-items:center; font-size:12.5px; padding:9px 10px; border-radius:8px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.30); color:#14141a; }
#features .task .cb{ width:15px; height:15px; border-radius:50%; border:1.5px solid #22c55e; flex:none; }
#features .task em{ margin-left:auto; font-style:normal; font-size:11px; color:#16a34a; }

/* AI reply suggestion */
#features .sug{ font-size:13px; padding:12px; border-radius:10px; background:linear-gradient(180deg,rgba(102,81,246,.08),transparent); border:1px solid rgba(102,81,246,.30); color:#14141a; }
#features .caret{ display:inline-block; width:2px; height:1em; background:#6651f6; vertical-align:-2px; animation:blink 1s steps(2) infinite; }
#features .bx.yl .caret{ background:#d99a00; }
@keyframes blink{ 50%{opacity:0} }

/* flying letter (sync) */
#features .fly{ display:flex; align-items:center; gap:12px; font-size:12.5px; }
#features .fly .node{ padding:8px 12px; border-radius:10px; background:#f6f5ff; border:1px solid rgba(102,81,246,.14); color:#3a3a44; white-space:nowrap; }
#features .fly .track{ flex:1; position:relative; height:2px; border-radius:2px; background:linear-gradient(90deg,rgba(102,81,246,.55),rgba(34,197,94,.55)); }
#features .fly .env{ position:absolute; top:-9px; left:0; color:#6651f6; animation:flyx 2.4s cubic-bezier(.55,0,.45,1) infinite; filter:drop-shadow(0 3px 7px rgba(102,81,246,.22)); }
@keyframes flyx{ 0%{left:0;transform:translateY(0) rotate(-6deg);opacity:0} 12%{opacity:1} 50%{transform:translateY(-13px) rotate(5deg)} 88%{opacity:1} 100%{left:calc(100% - 20px);transform:translateY(0) rotate(-4deg);opacity:0} }

@media (max-width:900px){ #features .bento{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ #features .bento{ grid-template-columns:1fr; } }

/* Respect reduced-motion: stop the looping animations */
@media (prefers-reduced-motion: reduce){
  #features .wave i, #features .fly .env, #features .caret{ animation:none !important; }
  #features .fly .env{ left:calc(50% - 10px); opacity:1; }
}