* { box-sizing: border-box; }

    :root {
      --jade: #2f7d6c;
      --jade-dark: #245f53;
      --jade-soft: #eaf4f1;
      --ink: #26384d;
      --muted: #6c7788;
      --page: #f4f7f6;
      --card: #fffefb;
      --border: #e2e9e6;
      --shadow-soft: 0 12px 32px rgba(28, 55, 48, 0.08);
      --shadow-card: 0 18px 44px rgba(28, 55, 48, 0.11);
      --shadow-card-hover: 0 24px 58px rgba(28, 55, 48, 0.16);
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at top left, rgba(47, 125, 108, 0.08), transparent 34%),
        var(--page);
    }

    .hero {
      width: min(1080px, calc(100% - 32px));
      margin-top: 28px;
      padding: 16px 28px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: rgba(255, 254, 251, 0.96);
      box-shadow: var(--shadow-soft);
      display: flex;
      align-items: center;
      gap: 26px;
      animation: hero-in 0.48s ease both;
    }

    .hero-logo {
      width: 112px;
      height: 112px;
      flex: 0 0 112px;
      object-fit: cover;
      border-radius: 28px;
      background: var(--jade);
      box-shadow: 0 12px 26px rgba(47, 125, 108, 0.22);
      animation: logo-in 0.56s 0.05s ease both;
    }

    .hero-text {
      flex: 1;
      text-align: center;
    }

    .hero-title {
      margin: 0;
      font-size: 46px;
      letter-spacing: 0.2px;
      font-weight: 900;
      color: #4b5050;
    }

    .hero-subtitle {
      margin: 9px 0 0;
      font-size: 21px;
      font-weight: 700;
      color: var(--ink);
    }

    .hero-note {
      margin: 8px 0 0;
      font-size: 16px;
      color: var(--muted);
    }

    .bottom-cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 38px;
      margin-top: 40px;
      padding: 0 18px;
    }

    .card {
      width: 370px;
      overflow: hidden;
      text-align: center;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: var(--card);
      box-shadow: var(--shadow-card);
    }

    .card.clickable {
      cursor: pointer;
      transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .card:nth-child(1) { animation: card-in 0.48s 0.14s ease both; }
    .card:nth-child(2) { animation: card-in 0.48s 0.24s ease both; }

    .card.clickable:hover {
      transform: translateY(-5px) scale(1.012);
      box-shadow: var(--shadow-card-hover);
      border-color: rgba(47, 125, 108, 0.28);
    }

    .card.clickable:active {
      transform: translateY(-1px) scale(0.985);
      transition-duration: 0.08s;
    }

    .card:focus-visible {
      outline: 3px solid rgba(47, 125, 108, 0.25);
      outline-offset: 5px;
    }

    .card img {
      width: 100%;
      height: 248px;
      object-fit: cover;
      display: block;
      transition: transform 0.38s ease;
    }

    .card.clickable:hover img { transform: scale(1.025); }

    .card h2 {
      margin: 18px 12px 8px;
      font-size: 23px;
      line-height: 1.15;
      font-weight: 800;
      color: var(--ink);
    }

    .card p {
      margin: 0 20px 24px;
      font-size: 15px;
      color: var(--muted);
    }

    footer {
      margin-top: auto;
      padding: 32px 16px 24px;
      font-size: 15px;
      color: #596676;
      text-align: center;
      animation: footer-in 0.5s 0.34s ease both;
    }

    @keyframes hero-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes logo-in {
      from { opacity: 0; transform: translateY(8px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes card-in {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes footer-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    @media (max-width: 820px) {
      .hero {
        flex-direction: column;
        gap: 16px;
        padding: 22px 20px;
      }

      .hero-logo {
        width: 104px;
        height: 104px;
        flex-basis: 104px;
        border-radius: 25px;
      }

      .hero-title { font-size: 38px; }
      .hero-subtitle { font-size: 19px; }

      .bottom-cards {
        gap: 28px;
        margin-top: 32px;
      }

      .card {
        width: 86vw;
        max-width: 370px;
      }
    }

    @media (max-width: 480px) {
      .hero {
        width: min(100% - 20px, 1080px);
        margin-top: 10px;
        border-radius: 22px;
      }

      .hero-title { font-size: 34px; }
      .hero-subtitle { font-size: 17px; }
      .hero-note { font-size: 14px; }
      .bottom-cards { margin-top: 24px; }
      .card { width: calc(100vw - 28px); }
      .card img { height: 220px; }
    }