.hero {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 1rem;
      position: relative;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.85);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 600px;
    }

    .hero h1 {
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      color: var(--text-dark);
    }

    .search-bar {
      position: relative;
      width: 100%;
      max-width: 600px;
    }

    .search-bar input {
      width: 100%;
      padding: 0 1rem;
      height: 48px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }

    .search-bar input:focus {
      outline: none;
    }

    .search-bar::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: calc(100% + 2px);
      height: calc(100% + 2px);
      border-radius: 6px;
      border: 2px solid var(--text-dark);
      pointer-events: none;
      animation: draw-border 0.8s ease-in-out forwards;
      display: none;
      box-sizing: border-box;
      z-index: 2;
    }

    .search-bar:hover::after {
      display: block;
    }

    @keyframes draw-border {
      0%   { clip-path: inset(0 100% 100% 0); }
      25%  { clip-path: inset(0 0 100% 0); }
      50%  { clip-path: inset(0 0 0 0); }
      75%  { clip-path: inset(0 0 0 0); }
      100% { clip-path: inset(0 0 0 0); }
    }

    .article-meta {
      font-size: 0.85rem;
      color: var(--text-light);
      margin-top: 1.5rem;
    }