*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:       #d01457;
  --brand-dark:  #a50f44;
  --bg:          #f4f5f7;
  --surface:     #ffffff;
  --text:        #1a1d23;
  --muted:       #6b7280;
  --border:      #e5e7eb;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,.10);
  --shadow-hover:0 8px 32px rgba(208,20,87,.15);
  --radius:      14px;
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── HEADER ── */
header {
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(208,20,87,.35);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo svg {
  height: 36px;
  width: auto;
  display: block;
}
.logo svg path {
  fill: #ffffff;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.header-tagline {
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .01em;
}

/* ── SEARCH BAR ── */
.search-wrap {
  max-width: 640px;
  margin: 36px auto 28px;
  padding: 0 24px;
}
.search-inner {
  position: relative;
}
.search-inner svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.search-inner input {
  width: 100%;
  padding: 13px 20px 13px 46px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-inner input::placeholder { color: var(--muted); }
.search-inner input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(208,20,87,.10);
}

/* ── SECTION LABEL ── */
.section-label {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── GRID ── */
.grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* ── APP CARD ── */
.card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
  animation: fadeUp .4s both;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(208,20,87,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition);
  border-radius: inherit;
}
.card:hover,
.card:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  outline: none;
}
.card:hover::before,
.card:focus-visible::before { opacity: 1; }

.card-icon {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--transition);
}
.card:hover .card-icon,
.card:focus-visible .card-icon { transform: scale(1.07); }

/* replaces the inline style="width:52px;height:52px" on every icon */
.card-icon svg {
  width: 52px;
  height: 52px;
}

.card-name {
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.3;
}

.card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity var(--transition), transform var(--transition);
}
.card:hover .card-badge,
.card:focus-visible .card-badge { opacity: 1; transform: scale(1); }

/* staggered animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card:nth-child(1)  { animation-delay: .04s; }
.card:nth-child(2)  { animation-delay: .08s; }
.card:nth-child(3)  { animation-delay: .12s; }
.card:nth-child(4)  { animation-delay: .16s; }
.card:nth-child(5)  { animation-delay: .20s; }
.card:nth-child(6)  { animation-delay: .24s; }
.card:nth-child(7)  { animation-delay: .28s; }
.card:nth-child(8)  { animation-delay: .32s; }
.card:nth-child(9)  { animation-delay: .36s; }
.card:nth-child(10) { animation-delay: .40s; }
.card:nth-child(11) { animation-delay: .44s; }
.card:nth-child(12) { animation-delay: .48s; }
.card:nth-child(13) { animation-delay: .52s; }
.card:nth-child(14) { animation-delay: .56s; }
.card:nth-child(15) { animation-delay: .60s; }

/* hide cards that don't match search */
.card.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .card, .card-icon, .card-badge { transition: none; }
}

/* ── FOOTER ── */
footer {
  background: #1a1d23;
  color: rgba(255,255,255,.45);
  text-align: center;
  font-size: 12.5px;
  padding: 18px 20px;
  letter-spacing: .01em;
}
footer strong { color: rgba(255,255,255,.7); font-weight: 500; }

/* ── ICON BACKGROUNDS ── */
.icon-hrm      { background: #eef2ff; }
.icon-bc       { background: #e6f4ff; }
.icon-expense  { background: #fff7ed; }
.icon-approval { background: #f0fdf4; }
.icon-outlook  { background: #eff6ff; }
.icon-byb      { background: #fffbeb; }
.icon-pams     { background: #eff6ff; }
.icon-inv      { background: #f0fdf4; }
.icon-sp       { background: #eff6ff; }
.icon-dams     { background: #fdf4ff; }
.icon-pac      { background: #fff1f2; }
.icon-net      { background: #f5f3ff; }
.icon-od       { background: #eff6ff; }
.icon-travel   { background: #ecfdf5; }
.icon-ai       { background: #0f172a; }