/* ============================================================
   TELESCOP — AI VISIBILITY BENCHMARK
   USE CASES v7
============================================================ */


.benchmark-use-cases{
  position:relative;
  overflow:hidden;

  padding:6.4rem 0 6.8rem;

  background:
    radial-gradient(
      circle at 7% 0%,
      rgba(108,86,255,.20),
      transparent 31rem
    ),
    radial-gradient(
      circle at 96% 100%,
      rgba(253,224,71,.08),
      transparent 28rem
    ),
    #0F172A;

  color:#fff;
}


.benchmark-use-cases::before{
  content:'';

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.5;

  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:54px 54px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 85%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000,
      transparent 85%
    );
}


.benchmark-use-cases
.research-container{
  position:relative;
  z-index:2;
}


/* ============================================================
   HEADER
============================================================ */

.benchmark-use-cases-header{
  max-width:850px;
  margin-bottom:3rem;
}


.benchmark-use-cases-kicker{
  display:block;

  margin-bottom:.8rem;

  color:#C4B5FD;

  font-size:.72rem;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.09em;
}


.benchmark-use-cases-header h2{
  max-width:820px;

  margin:0;

  color:#fff;

  font-size:
    clamp(2.5rem,4vw,3.8rem);

  line-height:1.02;
  letter-spacing:-.052em;
}


.benchmark-use-cases-header p{
  max-width:730px;

  margin:1.15rem 0 0;

  color:#CBD5E1;

  font-size:1.05rem;
  line-height:1.7;
}


/* ============================================================
   GRID
============================================================ */

.benchmark-use-cases-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:1rem;
}


/* ============================================================
   CARDS
============================================================ */

.benchmark-use-case{
  --accent:#A78BFA;
  --soft:rgba(167,139,250,.11);

  position:relative;

  min-height:430px;

  display:flex;
  flex-direction:column;

  padding:1.55rem;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      var(--soft),
      rgba(255,255,255,.026) 54%,
      rgba(255,255,255,.016)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);

  transition:
    transform .2s ease,
    border-color .2s ease;
}


.benchmark-use-case::before{
  content:'';

  position:absolute;

  top:0;
  left:0;
  right:0;

  height:4px;

  background:var(--accent);
}


.benchmark-use-case:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
}


/* ============================================================
   CARD TOP
============================================================ */

.benchmark-use-case-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:.75rem;

  margin-bottom:1.2rem;
}


.benchmark-use-case-number{
  color:var(--accent);

  font-size:.73rem;
  font-weight:900;

  letter-spacing:.07em;
}


.benchmark-use-case-category{
  display:inline-flex;

  padding:.4rem .6rem;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  background:var(--soft);

  color:var(--accent);

  font-size:.64rem;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.07em;
}


/* ============================================================
   CONTENT
============================================================ */

.benchmark-use-case h3{
  margin:0 0 .8rem;

  color:#fff;

  font-size:1.24rem;
  line-height:1.26;

  letter-spacing:-.025em;
}


.benchmark-use-case > p{
  margin:0;

  color:#CBD5E1;

  font-size:.86rem;
  line-height:1.65;
}


/* ============================================================
   DETAIL
============================================================ */

.benchmark-use-case-detail{
  margin-top:1.25rem;
  padding:1rem;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:13px;

  background:
    rgba(15,23,42,.34);
}


.benchmark-use-case-detail > span{
  display:block;

  margin-bottom:.4rem;

  color:var(--accent);

  font-size:.64rem;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.075em;
}


.benchmark-use-case-detail p{
  margin:0;

  color:#E2E8F0;

  font-size:.79rem;
  line-height:1.58;
}


/* ============================================================
   OUTCOME
============================================================ */

.benchmark-use-case-outcome{
  display:block;

  margin-top:auto;
  padding-top:1.05rem;

  color:var(--accent);

  font-size:.8rem;
  line-height:1.5;
}


/* ============================================================
   DISTINCT ACCENTS
============================================================ */

.benchmark-use-case-product{
  --accent:#FDE047;
  --soft:rgba(253,224,71,.10);
}

.benchmark-use-case-market{
  --accent:#67E8F9;
  --soft:rgba(103,232,249,.10);
}

.benchmark-use-case-competition{
  --accent:#A78BFA;
  --soft:rgba(167,139,250,.12);
}

.benchmark-use-case-brand{
  --accent:#6EE7B7;
  --soft:rgba(110,231,183,.10);
}

.benchmark-use-case-investment{
  --accent:#FDA4AF;
  --soft:rgba(253,164,175,.10);
}

.benchmark-use-case-research{
  --accent:#93C5FD;
  --soft:rgba(147,197,253,.10);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media(max-width:1050px){

  .benchmark-use-cases-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media(max-width:650px){

  .benchmark-use-cases{
    padding:4.7rem 0 5rem;
  }

  .benchmark-use-cases-grid{
    grid-template-columns:1fr;
  }

  .benchmark-use-case{
    min-height:auto;
  }

  .benchmark-use-cases-header h2{
    font-size:2.45rem;
  }

}