/* =========================
   UI / UX Design Page
========================= */

.ux-hero{
  position:relative;
  padding:96px 0 60px;
  overflow:hidden;
}
.ux-bg{ position:absolute; inset:0; pointer-events:none }
.ux-grid{
  position:absolute; inset:0;
  opacity:.06;
  background:
    linear-gradient(to right, rgba(108,99,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,102,194,.35) 1px, transparent 1px);
  background-size: 52px 52px;
}
.ux-orb{
  position:absolute;
  width:520px; height:520px;
  filter:blur(90px);
  opacity:.35;
  border-radius:999px;
}
.ux-orb.orb-1{
  right:-160px; top:-150px;
  background:radial-gradient(closest-side,var(--brand),transparent 70%);
}
.ux-orb.orb-2{
  left:-180px; bottom:-200px;
  background:radial-gradient(closest-side,var(--brand-2),transparent 70%);
}

.ux-hero__wrap{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
}
@media (max-width:991px){
  .ux-hero__wrap{ grid-template-columns:1fr }
}

.ux-pill{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  background:rgba(108,99,255,.12);
  margin-bottom:14px;
}

.ux-title{
  font-size:clamp(2.2rem,3.9vw,3.4rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
}
.ux-sub{
  color:var(--muted);
  max-width:56ch;
  margin-top:12px;
}

.ux-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.ux-proof{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.ux-proof__item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);
  font-weight:800;
}
[data-theme="dark"] .ux-proof__item{
  background:rgba(255,255,255,.04);
  border:var(--border);
}

/* SIDE PANEL */
.ux-panel{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow-lg);
}
[data-theme="dark"] .ux-panel{
  background:rgba(255,255,255,.04);
  border:var(--border);
}

.ux-panel__bar{
  margin-top:16px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
}

/* TOOLS */
.ux-tools{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* DELIVERABLE CARDS */
.ux-card{
  padding:22px;
  border-radius:20px;
  text-align:center;
}
.ux-card i{
  font-size:2rem;
  color:var(--brand);
  margin-bottom:10px;
}