:root{
  --ludo-bg-deep:#05070d;
  --ludo-line:rgba(255,255,255,.08);
  --ludo-line-soft:rgba(255,255,255,.06);
  --ludo-text-hi:#e9eef6;
  --ludo-text-mid:#aab4c6;
  --ludo-text-low:#6b7688;

  --ludo-c1-a:#22d3ee; --ludo-c1-b:#3b82f6; /* Visibility & Authority — cyan/blue */
  --ludo-c2-a:#c084fc; --ludo-c2-b:#e879f9; /* Sales & Conversion — violet/fuchsia */
  --ludo-c3-a:#fbbf24; --ludo-c3-b:#fb923c; /* Operations & Productivity — amber/orange */

  --ludo-font-display:'Space Grotesk', sans-serif;
  --ludo-font-body:'Inter', sans-serif;
  --ludo-font-mono:'JetBrains Mono', monospace;
}

.ludo-section{
 background: radial-gradient(60% 50% at 15% 10%, rgba(34, 211, 238, .08), transparent 60%), radial-gradient(50% 45% at 90% 85%, rgba(232, 121, 249, .07), transparent 60%), #05070da1;
  color:var(--ludo-text-hi);
  
  padding:5rem 0;
  position:relative;
  overflow:hidden;
}
.ludo-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--ludo-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--ludo-line-soft) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(65% 65% at 50% 40%, #000 40%, transparent 100%);
  pointer-events:none;
}

/* ---------- row = category label + its 3 cards ---------- */
.ludo-row{
  --ludo-cat-a:var(--ludo-c1-a); --ludo-cat-b:var(--ludo-c1-b);
  position:relative; z-index:1;
  display:flex;
  align-items:stretch;
  gap:1.75rem;
  padding:0.9rem 0;
  border-bottom:1px solid var(--ludo-line-soft);
}
.ludo-row:first-child{padding-top:0;}
.ludo-row:last-child{border-bottom:none; padding-bottom:0;}
.ludo-row[data-cat="visibility"]{--ludo-cat-a:var(--ludo-c1-a); --ludo-cat-b:var(--ludo-c1-b);}
.ludo-row[data-cat="sales"]{--ludo-cat-a:var(--ludo-c2-a); --ludo-cat-b:var(--ludo-c2-b);}
.ludo-row[data-cat="ops"]{--ludo-cat-a:var(--ludo-c3-a); --ludo-cat-b:var(--ludo-c3-b);}

.ludo-row-label{
  flex:0 0 270px;
  max-width:270px;
  display:flex; gap:1rem; align-items:flex-start;
  cursor:pointer;
  transition:opacity .35s ease;
}
.ludo-cat-img{
  width:55px; height:55px;
  border-radius:13px;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid var(--ludo-line);
  background:rgba(255,255,255,.04);
  transition:box-shadow .35s ease, border-color .35s ease;
}
.ludo-row.is-active .ludo-cat-img{
  border-color:var(--ludo-cat-a);
  box-shadow:0 0 18px -2px var(--ludo-cat-a);
}
.ludo-row-label h3{
  
  font-size:17px;
  font-weight:600;
  margin:0 0 .3rem;
  color:var(--ludo-text-hi);
}
.ludo-row-label p{
  font-size:.82rem;
  color:var(--ludo-text-low);
  margin:0;
  line-height:1.42;
}

.ludo-row-cards{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.9rem;
}
.ludo-row.is-dim .ludo-row-label{opacity:.4;}

/* ---------- card ---------- */
.ludo-card{
  --ludo-cat-a:var(--ludo-c1-a); --ludo-cat-b:var(--ludo-c1-b);
  position:relative;
  border-radius:15px;
  padding:1.15rem 1.2rem;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid #d5bcff59;;
  backdrop-filter:blur(6px);
  overflow:hidden;
  opacity:0; transform:translateY(18px);
  transition:opacity .3s ease, transform .3s ease, border-color .35s ease, box-shadow .35s ease;
}
.ludo-card.is-visible{opacity:1; transform:translateY(0);}
.ludo-card.is-dim{opacity:.4 !important;}

.ludo-card[data-cat="visibility"]{--ludo-cat-a:var(--ludo-c1-a); --ludo-cat-b:var(--ludo-c1-b);}
.ludo-card[data-cat="sales"]{--ludo-cat-a:var(--ludo-c2-a); --ludo-cat-b:var(--ludo-c2-b);}
.ludo-card[data-cat="ops"]{--ludo-cat-a:var(--ludo-c3-a); --ludo-cat-b:var(--ludo-c3-b);}

.ludo-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:15px;
  padding:1px;
  background:linear-gradient(135deg, var(--ludo-cat-a), var(--ludo-cat-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}
.ludo-card:hover::before, .ludo-card.is-active::before{opacity:1;}
.ludo-card:hover, .ludo-card.is-active{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -22px var(--ludo-cat-a);
}

.ludo-scan{
  position:absolute; left:0; right:0; height:45%; top:-45%;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--ludo-cat-a) 18%, transparent), transparent);
  opacity:0; pointer-events:none;
}
.ludo-card:hover .ludo-scan, .ludo-card.is-active .ludo-scan{opacity:1; animation:ludo-sweep 1.6s ease-in-out infinite;}
@keyframes ludo-sweep{0%{top:-45%;} 100%{top:145%;}}

/* title + icon, one row */
.ludo-card-row{
  position:relative; z-index:1;
  display:flex;
  align-items:center;
  gap:.9rem;
}
.ludo-card h4{
  font-weight:600;
  font-size:.94rem;
  line-height:1.28;
  margin:0;
  color:var(--ludo-text-hi);
  flex:1 1 auto;
}

/* bigger, more attractive icon */
.ludo-card-icon{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ludo-cat-a);
  border:1px solid var(--ludo-line);
  background:linear-gradient(150deg, color-mix(in srgb, var(--ludo-cat-a) 20%, transparent), color-mix(in srgb, var(--ludo-cat-b) 10%, transparent));
  transition:transform .35s ease, box-shadow .35s ease;
}
.ludo-card-icon svg{width:23px; height:23px;}
.ludo-card:hover .ludo-card-icon, .ludo-card.is-active .ludo-card-icon{
  transform:rotate(-6deg) scale(1.1);
  box-shadow:0 0 16px -3px var(--ludo-cat-a);
}

@media (max-width: 991.98px){
  .ludo-row{flex-direction:column; gap:1.1rem;}
  .ludo-row-label{flex:1 1 auto; max-width:none;}
}
@media (max-width: 575.98px){
  .ludo-row-cards{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .ludo-card, .ludo-scan{animation:none !important; transition:none !important;}
}





.lsg-gaps-section{
  background:#05060c;
  padding:100px 0;
  position:relative;
  overflow:hidden;
}

/* ---------- ambient background ---------- */
.lsg-gaps-gridbg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events:none;
}

.lsg-gaps-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.35;
  pointer-events:none;
  animation:lsgOrbFloat 10s ease-in-out infinite;
}
.lsg-gaps-orb--blue{ width:320px; height:320px; background:#38bdf8; top:-60px; left:-80px; }
.lsg-gaps-orb--purple{ width:380px; height:380px; background:#a855f7; top:20%; right:-120px; animation-delay:2s; }
.lsg-gaps-orb--orange{ width:300px; height:300px; background:#fb923c; bottom:-100px; left:35%; animation-delay:4s; }

@keyframes lsgOrbFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-30px) scale(1.1); }
}

/* ---------- heading ---------- */
.lsg-gaps-heading{ text-align:center; max-width:640px; margin:0 auto 20px; }
.lsg-gaps-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  color:#a855f7;
  margin-bottom:14px;
}
.lsg-gaps-title{
  font-size:36px;
  font-weight:800;
  color:#fff;
  margin:0;
}

/* ---------- Left category blocks ---------- */
.lsg-gaps-cat{
  display:flex;
  gap:16px;
  margin-bottom:42px;
  padding:14px;
  transition:transform .35s ease;
}
.lsg-gaps-cat:hover{ transform:translateX(6px); }
.lsg-gaps-cat:last-child{ margin-bottom:0; }

.lsg-gaps-cat-icon{
  position:relative;
  width:52px;
  height:52px;
  min-width:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border:1px solid;
  background:rgba(255,255,255,.02);
}
.lsg-gaps-cat-ring{
  position:absolute;
  inset:-6px;
  border:1px solid;
  opacity:0;
  transition:opacity .35s ease, inset .35s ease;
}
.lsg-gaps-cat:hover .lsg-gaps-cat-ring{ opacity:.5; inset:-10px; }

.lsg-gaps-cat-icon--blue{ color:#38bdf8; border-color:rgba(56,189,248,.4); box-shadow:0 0 20px rgba(56,189,248,.15); }
.lsg-gaps-cat-icon--blue .lsg-gaps-cat-ring{ border-color:rgba(56,189,248,.6); }
.lsg-gaps-cat-icon--purple{ color:#c084fc; border-color:rgba(168,85,247,.4); box-shadow:0 0 20px rgba(168,85,247,.15); }
.lsg-gaps-cat-icon--purple .lsg-gaps-cat-ring{ border-color:rgba(168,85,247,.6); }
.lsg-gaps-cat-icon--orange{ color:#fb923c; border-color:rgba(251,146,60,.4); box-shadow:0 0 20px rgba(251,146,60,.15); }
.lsg-gaps-cat-icon--orange .lsg-gaps-cat-ring{ border-color:rgba(251,146,60,.6); }

.lsg-gaps-cat-title{
  color:#f3f4f6;
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}
.lsg-gaps-cat-desc{
  color:#8b8fa3;
  font-size:13px;
  line-height:1.6;
  margin:0;
}

/* ---------- Right grid ---------- */
.lsg-gaps-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.lsg-gaps-card{
  position:relative;
  padding:24px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease;
  transform-style:preserve-3d;
  will-change:transform;
}

/* gradient glow blob inside card, appears on hover */
.lsg-gaps-card-glow{
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  top:-60px;
  right:-60px;
  filter:blur(40px);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.lsg-gaps-card--blue .lsg-gaps-card-glow{ background:#38bdf8; }
.lsg-gaps-card--purple .lsg-gaps-card-glow{ background:#a855f7; }
.lsg-gaps-card--orange .lsg-gaps-card-glow{ background:#fb923c; }
.lsg-gaps-card:hover .lsg-gaps-card-glow{ opacity:.35; }

/* animated shimmer border line */
.lsg-gaps-card-shine{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  transform:translateX(-100%);
  opacity:0;
}
.lsg-gaps-card:hover .lsg-gaps-card-shine{
  animation:lsgShineMove 1.2s ease forwards;
}
@keyframes lsgShineMove{
  0%{ transform:translateX(-100%); opacity:1; }
  100%{ transform:translateX(100%); opacity:0; }
}

.lsg-gaps-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:26px;
  position:relative;
  z-index:1;
}

.lsg-gaps-card-num{
  font-size:26px;
  font-weight:800;
  font-family:monospace;
  opacity:.35;
  transition:opacity .35s ease;
}
.lsg-gaps-card:hover .lsg-gaps-card-num{ opacity:.8; }
.lsg-gaps-card--blue .lsg-gaps-card-num{ color:#38bdf8; }
.lsg-gaps-card--purple .lsg-gaps-card-num{ color:#a855f7; }
.lsg-gaps-card--orange .lsg-gaps-card-num{ color:#fb923c; }

.lsg-gaps-card-iconbox{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  color:#fff;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.lsg-gaps-card--blue .lsg-gaps-card-iconbox{ background:linear-gradient(135deg,#0ea5e9,#38bdf8); }
.lsg-gaps-card--purple .lsg-gaps-card-iconbox{ background:linear-gradient(135deg,#8b5cf6,#c084fc); }
.lsg-gaps-card--orange .lsg-gaps-card-iconbox{ background:linear-gradient(135deg,#f97316,#fb923c); }
.lsg-gaps-card:hover .lsg-gaps-card-iconbox{ transform:rotate(-10deg) scale(1.15); }

.lsg-gaps-card-title{
  position:relative;
  z-index:1;
  margin:0;
  font-size:16px;
  font-weight:700;
  color:#f3f4f6;
  line-height:1.4;
}

/* border + shadow states per color */
.lsg-gaps-card:hover{ transform:translateY(-8px); }
.lsg-gaps-card--blue:hover{ border-color:rgba(56,189,248,.6); box-shadow:0 20px 45px rgba(56,189,248,.2); }
.lsg-gaps-card--purple:hover{ border-color:rgba(168,85,247,.6); box-shadow:0 20px 45px rgba(168,85,247,.2); }
.lsg-gaps-card--orange:hover{ border-color:rgba(251,146,60,.6); box-shadow:0 20px 45px rgba(251,146,60,.2); }

/* ---------- Reveal animation base states ---------- */
.lsg-reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .7s ease, transform .7s ease;
}
.lsg-reveal-left.lsg-revealed{ opacity:1; transform:translateX(0); }

.lsg-reveal-up{
  opacity:0;
  transform:translateY(40px) scale(.96);
  filter:blur(4px);
  transition:opacity .7s ease, transform .7s ease, filter .7s ease;
}
.lsg-reveal-up.lsg-revealed{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .lsg-gaps-grid{ grid-template-columns:repeat(2, 1fr); }
  .lsg-gaps-title{ font-size:28px; }
}
@media (max-width: 575px){
  .lsg-gaps-grid{ grid-template-columns:1fr; }
  .lsg-gaps-cat{ margin-bottom:28px; }
}

@media (prefers-reduced-motion: reduce){
  .lsg-reveal-left, .lsg-reveal-up{ opacity:1; transform:none; filter:none; transition:none; }
  .lsg-gaps-orb{ animation:none; }
}