/* ============================================================
   CARDS
   Two states: media (has an image) and icon (does not).
   Never a large empty box — an unfilled card stays compact.
   ============================================================ */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--color-border);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)),
    var(--color-surface);
  transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med),background var(--t-med);
}

/* Hairline of accent light along the top edge, brightening on hover. */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(25,199,242,.55),transparent);
  opacity:.35;
  transition:opacity var(--t-med);
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--t-med);
  background:radial-gradient(420px circle at 50% 0%,rgba(25,199,242,.14),transparent 62%);
}
.card:hover,
.card:focus-within{
  transform:translateY(-5px);
  border-color:rgba(25,199,242,.34);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95),0 0 0 1px rgba(25,199,242,.14);
}
.card:hover::before,
.card:focus-within::before{opacity:1}
.card:hover::after,
.card:focus-within::after{opacity:1}

/* ---------- media state ---------- */
.card-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#060C16;
}
.card-media__image,
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.card:hover .card-media__image{transform:scale(1.04)}
/* Gradient only over the lower third, so the image is never muddied. */
.card-media::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:56%;
  background:linear-gradient(180deg,rgba(11,19,32,0),rgba(11,19,32,.92));
}

/* ---------- body ---------- */
.card-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6rem;
  flex:1;
  padding:clamp(1.25rem,1.9vw,1.6rem);
}
.card--media .card-body{padding-top:clamp(1.1rem,1.6vw,1.35rem)}

/* Icon tile replaces the banner on image-less cards.
   Squircle-ish radius, inner top highlight and a soft outer glow — the details
   that separate a considered tile from a plain rounded square. */
.card-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  margin-bottom:.45rem;
  border-radius:14px;
  color:#7FE0FF;
  border:1px solid rgba(25,199,242,.22);
  background:
    linear-gradient(155deg,rgba(25,199,242,.18) 0%,rgba(27,92,255,.07) 55%,rgba(255,255,255,.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 6px 18px -10px rgba(25,199,242,.55);
  transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med),color var(--t-med);
}
.card-icon svg{
  width:22px;
  height:22px;
  /* Optical lift: strokes sit slightly high inside a tile. */
  transform:translateY(-.5px);
}
.card-icon__custom{
  width:24px;
  height:24px;
  object-fit:contain;
}
.card:hover .card-icon{
  transform:translateY(-3px);
  color:#A9EDFF;
  border-color:rgba(25,199,242,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 12px 26px -12px rgba(25,199,242,.8);
}

.card-kicker{
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--color-primary);
}
.card-title{
  font-size:clamp(1.08rem,1.3vw,1.24rem);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.28;
  color:#fff;
}
/* No clamping or fixed heights: copy is never cut off mid-sentence. */
.card-text{
  color:var(--color-text-secondary);
  font-size:.925rem;
  line-height:1.62;
  flex:1;
  overflow:visible;
}
.card-meta{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  font-size:var(--fs-small);
  color:var(--color-text-secondary);
}

.card-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-top:.5rem;
  padding-top:.85rem;
  width:100%;
  border-top:1px solid var(--color-border);
  font-size:.86rem;
  font-weight:700;
  color:#DCE6F1;
  transition:color var(--t-fast);
}
.card-link .icon{width:15px;height:15px;transition:transform var(--t-fast)}
.card:hover .card-link{color:var(--color-primary)}
.card:hover .card-link .icon{transform:translateX(4px)}
/* Whole card is clickable while keeping exactly one real anchor. */
.card-link::after{content:"";position:absolute;inset:0}

/* ---------- feature blocks (capability grids) ---------- */
.grid-3--flat{gap:clamp(1.5rem,2.6vw,2.4rem)}
.feature{
  position:relative;
  padding-top:var(--space-md);
  border-top:1px solid var(--color-border);
}
.feature__rule{
  position:absolute;
  top:-1px;left:0;
  width:44px;height:2px;
  background:var(--grad-cta);
}
.feature h3{margin-bottom:.55rem;font-size:1.08rem;letter-spacing:-.015em}
.feature p{color:var(--color-text-secondary);font-size:.925rem;line-height:1.62}