:root {
  --navy: #00205B;
  --navy-deep: #001336;
  --orange: #FFA300;
  --orange-dim: #FFB733;
  --white: #FFFFFF;
  --black: #1a1a1a;
}

/* ---------- GRID ---------- */

.grid {
  max-width: 950px;
  margin: 0 auto 60px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
}

/* ---------- CARD ---------- */

.grid .card {
  box-sizing: border-box;
  position: relative;
  background: var(--white);
  color: var(--black);
  flex: 0 1 450px;
  width: 100%;
  max-width: 450px;
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: 2px solid var(--orange);

  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 18px 34px -18px rgba(0,0,0,0.4);

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s ease;
}

/* ---------- DECORATIVE GLOW ---------- */

.grid .card::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255,163,0,0.14) 0%,
    rgba(255,163,0,0) 70%
  );

  pointer-events: none;
}

/* ---------- CARD HOVER ---------- */

.grid .card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 1px 2px rgba(0,0,0,0.08),
    0 28px 44px -16px rgba(0,0,0,0.45);
}

/* ---------- CARD BODY ---------- */

.grid .card__body {
  position: relative;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---------- ICON ---------- */

.grid .card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0,32,91,0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 12px;

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

.grid .card__icon svg {
  width: 21px;
  height: 21px;
  stroke: var(--navy);
  transition: stroke 0.3s ease;
}

.grid .card:hover .card__icon {
  background: var(--navy);
  border-color: var(--navy);
}

.grid .card:hover .card__icon svg {
  stroke: var(--white);
}

/* ---------- TITLE ---------- */

.grid .card__title {
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.01em;

  margin: 0 0 10px;
  color: var(--navy);

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  width: auto;
  max-width: 100%;
  border-bottom: none;
}

/* ---------- DIVIDER ---------- */

.grid .card__divider {
  width: 38px;
  height: 1px;
  background: var(--orange);
  border-radius: 0;
  margin: 0 0 12px;
  flex-shrink: 0;
}

/* ---------- DESCRIPTION ---------- */

.grid .card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333333;

  margin: 0 0 20px;
  flex: none;
}

/* ---------- BUTTON ---------- */

.grid .card__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: transparent;
  color: #C97E00;
  border: 1px solid var(--orange);

  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.3;

  padding: 9px 15px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;

  margin-top: 0;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* ---------- BUTTON ICON ---------- */

.grid .card__btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* ---------- BUTTON HOVER ---------- */

.grid .card__btn:hover {
  background: var(--orange);
  color: var(--navy-deep);
  border-color: var(--orange);

  box-shadow:
    0 10px 20px -8px rgba(255,163,0,0.5);
}

.grid .card__btn:hover svg {
  transform: translateX(3px);
}

/* ---------- BUTTON FOCUS ---------- */

.grid .card__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ---------- TABLET ---------- */

@media (max-width: 950px) {
  .grid {
    padding: 0 20px;
    gap: 16px;
  }

  .grid .card {
    flex: 1 1 300px;
    max-width: 450px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 600px) {
  .grid {
    padding: 0 15px;
    gap: 16px;
  }

  .grid .card {
    flex: 0 1 100%;
    max-width: 450px;
    min-height: 0;
  }

  .grid .card__body {
    padding: 20px;
  }

  .grid .card__title {
    font-size: 1.15rem;
  }

  .grid .card__desc {
    font-size: 0.9rem;
    margin-bottom: 18px;
  }
}