/* AIM Platform · components */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1;
  padding: .92rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--gold);
  color: #1a1305;
  box-shadow: 0 8px 30px -12px rgba(175, 125, 30, .8);
}
.btn-primary:hover { background: var(--gold-bright); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--ink-700);
}
.btn-ghost:hover { border-color: var(--gold-line); color: #fff; transform: translateY(-2px); }
.btn-ghost.on-light { color: var(--on-light); border-color: var(--cream-line); }
.btn-ghost.on-light:hover { border-color: var(--gold); color: var(--on-light); }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 1.7rem;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.card .ic {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  margin-bottom: 1.1rem;
}
.card .ic svg { width: 22px; height: 22px; color: var(--gold-bright); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--on-dark-mid); font-size: .98rem; }
.card .solves {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--ink-700);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--on-dark-mute);
}
.card .solves b { color: var(--gold-bright); font-weight: 500; }

/* Card on cream */
.card.on-light {
  background: #fff;
  border-color: var(--cream-line);
  box-shadow: 0 24px 60px -42px rgba(15, 27, 61, .45);
}
.card.on-light:hover { border-color: var(--gold); }
.card.on-light h3 { color: var(--on-light); }
.card.on-light p { color: var(--on-light-mid); }
.card.on-light .solves { border-top-color: var(--cream-line); color: var(--on-light-mute); }
.card.on-light .solves b { color: var(--gold); }

/* ---------- Screen frame (urun ekranlari) ---------- */
.frame {
  border-radius: var(--radius);
  border: 1px solid var(--ink-700);
  background: var(--ink-850);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-700);
}
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-700); display: block; }
.frame__bar i:nth-child(1) { background: #4a5568; }
.frame__bar span {
  margin-left: .6rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--on-dark-mute);
}
.frame img { width: 100%; height: auto; }

/* Captioned screen tile */
.tile { display: flex; flex-direction: column; gap: .9rem; }
.tile__cap { padding-left: .2rem; }
.tile__cap .k {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.tile__cap h3 { font-size: 1.15rem; margin: .35rem 0 .3rem; }
.tile__cap p { color: var(--on-dark-mute); font-size: .92rem; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--cream-line);
  background: #fff;
  color: var(--on-light-mid);
}
.badge.dark { background: var(--ink-800); border-color: var(--ink-700); color: var(--on-dark-mid); }

/* ---------- Module category block ---------- */
.modcat { border-top: 1px solid var(--ink-700); padding-top: 1.1rem; }
.modcat__h {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: .9rem;
}
.modcat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.modcat li {
  color: var(--on-dark-mid);
  font-size: 1rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.modcat li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; transform: translateY(-2px); }

/* ---------- Radar signature ---------- */
.radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 480px; margin-inline: auto; }
.radar svg { width: 100%; height: 100%; display: block; }
.radar .sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 300deg, rgba(212, 162, 76, .35) 350deg, rgba(212, 162, 76, .0) 360deg);
  -webkit-mask: radial-gradient(circle, #000 62%, transparent 63%);
  mask: radial-gradient(circle, #000 62%, transparent 63%);
  animation: spin 7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar .sweep { animation: none; opacity: .5; } }

/* Ambient hero radar glow */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }