.hero {



      display: grid;



      grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.76fr);



      gap: clamp(24px, 5vw, 58px);



      align-items: center;



      padding: clamp(26px, 6vw, 72px) 0 36px;



    }







    .eyebrow {



      display: inline-flex;



      align-items: center;



      gap: 9px;



      width: fit-content;



      margin: 0 0 18px;



      padding: 8px 11px;



      border: 1px solid rgba(0, 223, 246, 0.42);



      border-radius: 999px;



      background: rgba(255, 255, 255, 0.72);



      color: #004bd8;



      font-size: 0.82rem;



      font-weight: 700;



      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.1);



    }







    .eyebrow::before {



      width: 8px;



      height: 8px;



      border-radius: 999px;



      background: var(--magenta);



      box-shadow: 0 0 0 4px rgba(255, 0, 127, 0.1);



      content: "";



    }







    h1 {



      max-width: 780px;



      margin: 0;



      font-size: 6.7rem;



      line-height: 0.88;



      letter-spacing: 0;



    }







    .hero-lede {



      max-width: 620px;



      margin: 18px 0 0;



      color: #475467;



      font-size: 1.18rem;



      line-height: 1.72;



    }







    .hero-slogan {



      margin: 22px 0 0;



      color: #00615d;



      font-size: 2.36rem;



      font-weight: 850;



      line-height: 1.04;



      text-shadow: 0 0 24px rgba(0, 223, 246, 0.24);



    }







    .hero-actions {



      display: flex;



      flex-wrap: wrap;



      gap: 12px;



      margin-top: 40px;



    }







    .button {



      display: inline-flex;



      align-items: center;



      justify-content: center;



      min-height: 46px;



      padding: 12px 16px;



      border: 1px solid rgba(7, 19, 47, 0.12);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.72);



      color: var(--ink);



      font-weight: 760;



      text-decoration: none;



      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;



    }







    .button:hover {



      transform: translateY(-2px);



      border-color: rgba(0, 223, 246, 0.58);



      background: #fff;



      box-shadow: 0 14px 28px rgba(0, 104, 255, 0.12);



    }







    .button.primary {



      border-color: rgba(0, 223, 246, 0.54);



      background: linear-gradient(135deg, #053dff, #0068ff, #00dff6, #053dff);
      background-size: 300% 300%;
      animation: gradientFlow 4s ease infinite;



      color: #fff;



      box-shadow: 0 20px 40px rgba(0, 104, 255, 0.25);



    }







    .button.primary:hover {
      animation-play-state: paused;
      background: linear-gradient(135deg, #071342 0%, #0068ff 48%, #00dff6 100%);



    }

    @keyframes gradientFlow {

      0%   { background-position: 0% 50%; }

      50%  { background-position: 100% 50%; }

      100% { background-position: 0% 50%; }

    }








    .hero-panel {



      position: relative;



      overflow: hidden;



      min-height: 480px;



      border: 1px solid rgba(0, 223, 246, 0.3);



      border-radius: var(--radius);



      background:



        linear-gradient(160deg, rgba(7, 19, 66, 0.1), rgba(0, 223, 246, 0.04)),



        url("assets/endril-avatar.png") center / cover;



      box-shadow: var(--shadow);



      isolation: isolate;



    }







    .hero-panel::before {



      position: absolute;



      inset: 0;



      z-index: -1;



      content: "";



      background:



        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 19, 66, 0.28)),



        linear-gradient(135deg, rgba(0, 223, 246, 0.16), transparent 44%, rgba(255, 0, 127, 0.16));



    }







    .panel-card {



      position: absolute;



      right: 22px;



      bottom: 22px;



      left: 22px;



      border: 1px solid rgba(255, 255, 255, 0.72);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.86);



      box-shadow: 0 24px 56px rgba(7, 19, 66, 0.24);



      backdrop-filter: blur(18px);



    }







    .panel-card-header {



      display: flex;



      align-items: center;



      justify-content: space-between;



      gap: 12px;



      padding: 18px 18px 12px;



      border-bottom: 1px solid rgba(7, 19, 47, 0.08);



    }







    .panel-label {



      color: var(--muted);



      font-size: 0.78rem;



      font-weight: 800;



      text-transform: uppercase;



    }







    .panel-status {



      display: inline-flex;



      align-items: center;



      min-height: 28px;



      padding: 5px 9px;



      border-radius: 999px;



      background: rgba(0, 223, 246, 0.14);



      color: #0051cf;



      font-size: 0.75rem;



      font-weight: 800;



      white-space: nowrap;



    }







    .panel-feature {



      display: grid;



      /* First col: fixed 74px; second col: fills remaining space */

      grid-template-columns: 74px minmax(0, 1fr);



      gap: 14px;



      align-items: start;        /* was 'center' — vertical center caused overlap when text was tall */



      padding: 18px;



      overflow: hidden;           /* hard clip any overflow into image zone */



    }







    .panel-feature img {



      width: 74px;



      height: 74px;



      border: 1px solid rgba(0, 223, 246, 0.28);



      border-radius: var(--radius);



      object-fit: cover;



      grid-row: 1 / span 2;       /* span both text rows so img stays left of ALL text */



    }



    /* FEATURED 卡片无封面占位（轮换用，与 .panel-feature img 同步响应 860px 断点） */



    .featured-thumb-placeholder {



      width: 74px;



      height: 74px;



      border: 1px solid rgba(0, 223, 246, 0.42);



      border-radius: var(--radius);



      display: grid;



      place-items: center;



      background:

        linear-gradient(135deg, rgba(0, 223, 246, 0.22), rgba(255, 0, 127, 0.14)),

        #f5fbff;



      color: #0051cf;



      font-size: 1.4rem;



      font-weight: 850;



      grid-row: 1 / span 2;       /* span both text rows so placeholder stays left of ALL text */



      flex-shrink: 0;



    }







    .panel-feature h2 {



      margin: 0;



      font-size: 1.12rem;



      line-height: 1.28;



      overflow: hidden;



      text-overflow: ellipsis;



      white-space: nowrap;



      min-width: 0;



    }







    .panel-feature p {



      margin: 7px 0 0;



      color: #5f6c7b;



      font-size: 0.88rem;



      line-height: 1.55;



      overflow: hidden;



      display: -webkit-box;



      -webkit-line-clamp: 2;



      -webkit-box-orient: vertical;



      min-width: 0;



    }







    .stats {



      display: grid;



      grid-template-columns: repeat(3, minmax(0, 1fr));



      gap: 12px;



      padding: 0 18px 18px;



    }







    .stat {



      min-width: 0;



      padding: 12px;



      border: 1px solid rgba(7, 19, 47, 0.08);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.62);



      display: flex;



      flex-direction: column;



      align-items: center;



      justify-content: center;



    }







    .stat strong {



      display: block;



      font-size: 1.28rem;



      line-height: 1;



      text-align: center;



    }







    .stat span {



      display: block;



      margin-top: 6px;



      color: var(--muted);



      font-size: 0.74rem;



      line-height: 1.25;



      text-align: center;



    }







    .section {



      padding: 36px 0 64px;



    }







    .section-head {



      display: flex;



      align-items: end;



      justify-content: space-between;



      gap: 24px;



      margin-bottom: 18px;



    }







    .section-title {



      margin: 0;



      font-size: 2.86rem;



      line-height: 1;



    }







    .section-copy {



      max-width: 570px;



      margin: 12px 0 0;



      color: #5f6c7b;



      line-height: 1.72;



    }







    .tools-count {



      flex: 0 0 auto;



      min-height: 38px;



      padding: 10px 12px;



      border: 1px solid var(--line);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.72);



      color: #26395f;



      font-size: 0.9rem;



      font-weight: 760;



      white-space: nowrap;



    }







    .controls {



      position: sticky;



      top: 0;



      z-index: 3;



      display: grid;



      grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);



      gap: 12px;



      align-items: center;



      margin: 24px 0;



      padding: 10px;



      border: 1px solid rgba(0, 223, 246, 0.22);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.78);



      box-shadow: 0 14px 34px rgba(0, 104, 255, 0.09);



      backdrop-filter: blur(18px);



    }







    .search {



      width: 100%;



      height: 46px;



      padding: 0 14px;



      border: 1px solid rgba(7, 19, 47, 0.12);



      border-radius: var(--radius);



      outline: none;



      background: rgba(255, 255, 255, 0.72);



      color: var(--ink);



    }







    .search:focus {



      border-color: rgba(0, 223, 246, 0.62);



      box-shadow: 0 0 0 4px rgba(0, 223, 246, 0.16);



    }







    .filter-row {



      display: flex;



      flex-wrap: wrap;



      justify-content: flex-end;



      gap: 8px;



    }







    .filter-button {



      min-height: 38px;



      padding: 8px 11px;



      border: 1px solid rgba(7, 19, 47, 0.1);



      border-radius: var(--radius);



      background: rgba(255, 255, 255, 0.7);



      color: #26395f;



      cursor: pointer;



      font-size: 0.88rem;



      font-weight: 760;



      transition: background 160ms ease, border-color 160ms ease, color 160ms ease;



    }







    .filter-button:hover,



    .filter-button.active {



      border-color: rgba(0, 223, 246, 0.58);



      background: linear-gradient(135deg, rgba(0, 223, 246, 0.16), rgba(124, 255, 0, 0.12));



      color: #0051cf;



    }







    .grid {



      display: grid;



      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));



      gap: 18px;



      align-items: stretch;



    }