/* Spotlight Bento — the /lynxbe-platform module grid.
   Cursor-tracked glow border + asymmetric bento sizing on the two flagship
   modules, followed by a tabbed "explore every module" showcase covering
   the full catalog. Card content (titles/descriptions/tags) stays static
   HTML with the page's existing data-i18n keys — this file only styles
   what's already in the DOM; js/spotlight-bento.js only adds interaction. */

:root{
  --sb-panel:#14161C;
  --sb-panel-2:#191B22;
  --sb-border:rgba(255,255,255,.08);
  --sb-border-h:rgba(255,255,255,.16);
  --sb-text:#FFFFFF;
  --sb-text2:rgba(255,255,255,.72);
  --sb-text3:rgba(255,255,255,.5);
  --sb-idle-glow:rgba(255,255,255,.10);
  --sb-mock-bg:#0e1015;
  --sb-mock-card:#1c2029;
}
html.light-theme{
  --sb-panel:#FFFFFF;
  --sb-panel-2:#F6F9FC;
  --sb-border:#E3E8EF;
  --sb-border-h:#CFD7E0;
  --sb-text:#0A2540;
  --sb-text2:#425466;
  --sb-text3:#6B7A90;
  --sb-idle-glow:rgba(10,37,64,.10);
  /* mockups stay dark regardless of page theme — a device/app screenshot,
     not themed UI chrome, same reasoning real product-screenshot embeds use */
  --sb-mock-bg:#0e1015;
  --sb-mock-card:#1c2029;
}

.sb-intro{max-width:66ch;margin:0 0 32px}
.sb-intro h3{font-size:15.5px;color:var(--sb-text3);font-weight:500;margin:0;line-height:1.65}

/* ---- Bento grid ---- */
.sb-bento{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,auto);
  grid-auto-flow:dense;
}
@media(max-width:760px){.sb-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){
  .sb-bento{grid-template-columns:1fr}
  .sb-bento .spot-card{grid-column:span 1!important;grid-row:span 1!important}
}

.spot-card{
  padding:1px;border-radius:18px;height:100%;
  background:
    radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--glow,var(--sb-idle-glow)),transparent 55%),
    var(--sb-border);
  transition:background .08s linear;
  text-decoration:none;color:inherit;display:block;
}
.sb-lm{text-decoration:none}
.spot-inner{
  position:relative;overflow:hidden;background:var(--sb-panel);border-radius:17px;
  height:100%;display:flex;flex-direction:column;
}
.spot-inner::before{
  content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sb-badge{
  position:relative;flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  background:rgba(var(--rgb),.16);
  filter:saturate(var(--wake,0)) opacity(calc(.6 + .4 * var(--wake,0)));
  transition:filter .15s linear;
}
.sb-badge svg{width:20px;height:20px}
.sb-hero-badge{width:52px;height:52px;border-radius:14px}
.sb-hero-badge svg{width:24px;height:24px}

.sb-tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px}
.sb-tagp{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:100px;
  background:rgba(255,255,255,.05);color:var(--sb-text3)}
html.light-theme .sb-tagp{background:rgba(10,37,64,.05)}

.sb-t-sm{padding:20px}
.sb-t-sm h3{font-size:15px;font-weight:700;margin:0 0 6px;letter-spacing:-.005em;color:var(--sb-text)}
.sb-t-sm p{font-size:12px;line-height:1.5;color:var(--sb-text3);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.sb-t-md{padding:24px 26px;flex-direction:row;align-items:center;gap:20px}
.sb-t-md .sb-badge{margin-bottom:0}
.sb-t-md .sb-body{flex:1;min-width:0;display:flex;flex-direction:column;height:100%;justify-content:center}
.sb-t-md h3{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.008em;color:var(--sb-text)}
.sb-t-md p{font-size:13px;line-height:1.55;color:var(--sb-text2);margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-t-md .sb-tagrow{margin-top:0;padding-top:0}

.sb-t-hero{padding:28px}
.sb-t-hero h2{font-size:23px;font-weight:800;margin:0 0 8px;letter-spacing:-.015em;color:var(--sb-text)}
.sb-t-hero p{font-size:14px;color:var(--sb-text2);line-height:1.6;margin:0 0 16px;max-width:36ch}

.sb-mock-chat{background:var(--sb-mock-bg);border:1px solid var(--sb-border);border-radius:14px;padding:14px 16px;margin-top:auto}
.sb-mock-chat .sb-mch{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11.5px;color:var(--sb-text3)}
.sb-mock-chat .sb-mch i{width:6px;height:6px;border-radius:50%;background:#25D366;box-shadow:0 0 6px #25D366}
.sb-bubble{max-width:76%;padding:8px 12px;border-radius:12px;font-size:12.5px;line-height:1.4;margin-bottom:7px}
.sb-bubble.in{background:#20242e;color:rgba(255,255,255,.75);border-end-start-radius:3px}
.sb-bubble.out{background:rgba(37,211,102,.16);color:#d7ffe6;margin-inline-start:auto;border-end-end-radius:3px}

.sb-mock-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.sb-kcol{background:var(--sb-mock-bg);border:1px solid var(--sb-border);border-radius:10px;padding:8px}
.sb-kcol .sb-kt{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--sb-text3);margin-bottom:7px;text-transform:uppercase}
.sb-kcard{background:var(--sb-mock-card);border:1px solid var(--sb-border);border-radius:6px;padding:6px 8px;font-size:10.5px;color:rgba(255,255,255,.75);margin-bottom:5px}
.sb-kcard b{display:block;color:#fff;font-size:10.5px;font-weight:600}

.no-js-hover .spot-card{background:var(--sb-border)}
.no-js-hover .sb-badge{filter:none}

/* ---- Tabbed showcase ---- */
.sb-showcase{
  margin-top:56px;position:relative;background:var(--sb-panel);border-radius:18px;padding:36px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);overflow:hidden;
}
html.light-theme .sb-showcase{box-shadow:0 12px 32px rgba(10,37,64,.08)}
.sb-showcase::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 25% 20%,rgba(61,126,255,.08),transparent 65%)}
.sb-showcase h3{font-size:21px;font-weight:700;margin:0 0 10px;position:relative;color:var(--sb-text)}
.sb-showcase .sb-sub{font-size:14px;color:var(--sb-text3);margin:0 0 26px;max-width:52ch;position:relative}

.sb-tabbar{display:flex;gap:8px;border-bottom:1px solid var(--sb-border);margin-bottom:26px;
  overflow-x:auto;scrollbar-width:none;padding-bottom:2px;position:relative}
.sb-tabbar::-webkit-scrollbar{display:none}
.sb-ftab{flex:none;display:flex;align-items:center;gap:8px;padding:11px 16px;background:transparent;
  border:0;border-bottom:2px solid transparent;color:var(--sb-text3);font-size:13px;font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .25s}
.sb-ftab .sb-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  opacity:.4;transition:opacity .25s}
.sb-ftab .sb-dot svg{width:12px;height:12px;color:#fff}
.sb-ftab.active{color:var(--sb-text);border-color:var(--tabc,#3D7EFF)}
.sb-ftab.active .sb-dot{opacity:1}

.sb-panelwrap{position:relative;min-height:250px}
.sb-fpanel{position:absolute;inset:0;display:flex;opacity:0;transform:translateX(24px);pointer-events:none;
  transition:opacity .4s,transform .4s;background:var(--sb-panel-2);border-radius:12px;overflow:hidden}
html[dir="rtl"] .sb-fpanel{transform:translateX(-24px)}
.sb-fpanel.active{opacity:1;transform:translateX(0);pointer-events:auto;position:relative}
.sb-fp-left{width:42%;padding:30px;display:flex;flex-direction:column;justify-content:center}
.sb-fp-left .sb-fhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sb-fp-left .sb-fhead .sb-ic{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.sb-fp-left .sb-fhead .sb-ic svg{width:18px;height:18px;color:#fff}
.sb-fp-left h4{margin:0;font-size:19px;font-weight:700;color:var(--sb-text)}
.sb-fp-left p{color:var(--sb-text2);line-height:1.55;margin:0 0 20px;font-size:13.5px}
.sb-fp-left .sb-lm{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px}
.sb-fp-right{width:58%;position:relative;background:rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
html.light-theme .sb-fp-right{background:rgba(10,37,64,.04)}
.sb-fp-right .sb-circ{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sb-fp-right .sb-circ svg{width:38px;height:38px;color:#fff}
@media(max-width:640px){.sb-fpanel{flex-direction:column}.sb-fp-left,.sb-fp-right{width:100%}.sb-fp-right{min-height:140px}}

@media(prefers-reduced-motion:reduce){.spot-card,.sb-badge,.sb-fpanel{transition:none}}