/* ---------- HERO ---------- */
  main { position: relative; }

  .hero {
    max-width: 1440px;
    margin: 0 auto;
    /* padding: 56px 64px 32px; */
    position: relative;
  }

  .hero-banner {
    position: absolute;
    left: 56px;
    z-index: 3;
  }

  .hero-cloud {
    position: relative;
    margin: 56px auto 0;
    max-width: 980px;
    text-align: center;
    padding: 80px 24px 64px;
    background-image: url('../img/homepage_desktop_background.png');
    background-repeat: no-repeat;
    background-position: center center;
  }


  .hero-title {
    font-size: 56px;
    line-height: 1.05;
    color: var(--purple);
    margin: 0 0 28px;
    letter-spacing: 1px;
  }
  .hero-title .ink { color: var(--ink); }
  .hero-sub {
    color: var(--ink);
    margin: 0 0 40px;
    line-height: 1.4;
  }
  .hero-cta-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  /* .cta.lg { padding: 18px 40px; font-size: 18px; } */
  .pssst {
    font-size: 13px;
    color: var(--ink);
  }

  /* ---------- ARROW ---------- */
  .arrow-note {
    position: absolute;
    right: 64px;
    top: 320px;
    width: 200px;
    text-align: center;
    z-index: 2;
  }
  .arrow-note .handwritten {
    display: block;
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .arrow-note svg {
    width: 100%;
    height: auto;
  }

  /* ---------- LINEUP ---------- */
  .lineup {
    max-width: 80vw;
    margin: 0 auto;
    /* padding: 0 32px 96px; */
    position: relative;
  }
  .lineup-row {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 8px;
    align-items: end;
    overflow-x: auto;
  }
  .lineup-card {
    text-align: center;
    width: 150px;
    text-decoration: none;
  }
  .lineup-card .name {
    font-size: 18px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c);
    margin-bottom: 8px;
    display: block;
    transition: transform .25s;
  }
  .lineup-card .figure {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
  }
  .lineup-card .figure img {
    width: 100%; height: 100%;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.08));
  }
  .lineup-card:hover .figure {
    transform: translateY(-8px) scale(1.04);
  }
  .lineup-card:hover .name {
    transform: translateY(-2px);
  }

  /* ---------- ANIMATIONS ---------- */
  @keyframes float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
  }
  .lineup-card .figure { animation: float 4s ease-in-out infinite; }
  .lineup-card:nth-child(2) .figure { animation-delay: .3s; }
  .lineup-card:nth-child(3) .figure { animation-delay: .6s; }
  .lineup-card:nth-child(4) .figure { animation-delay: .9s; }
  .lineup-card:nth-child(5) .figure { animation-delay: 1.2s; }
  .lineup-card:nth-child(6) .figure { animation-delay: 1.5s; }
  .lineup-card:nth-child(7) .figure { animation-delay: 1.8s; }
  .lineup-card:nth-child(8) .figure { animation-delay: 2.1s; }
  .lineup-card:nth-child(9) .figure { animation-delay: 2.4s; }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-banner { animation: fade-up .6s .1s both; }
  .hero-title  { animation: fade-up .7s .15s both; }
  .hero-sub    { animation: fade-up .7s .25s both; }
  .hero-cta-wrap { animation: fade-up .7s .35s both; }
  .arrow-note  { animation: fade-up .8s .55s both; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1100px) {
    .arrow-note { display: none; }
    .hero-title { font-size: 52px; }
  }
  @media (max-width: 860px) {
    .hero { padding: 32px 0 16px; }
    .hero-banner { position: static; margin-bottom: 16px; transform: rotate(-4deg); padding: 0 20px 0; }
    .hero-cloud { padding: 48px 12px 40px; }
    .hero-title { font-size: 38px; }
    .hero-sub { font-size: 18px; }
    .lineup-row { grid-template-columns: repeat(10, 1fr); gap: 12px; row-gap: 24px; }
    .lineup-card .name { font-size: 13px; letter-spacing: 1px; }
    .lineup { padding: 0 0 0; 
    max-width: 100vw;}
  }
  @media (max-width: 480px) {
    .hero-title { font-size: 28px; }
    .hero-sub { font-size: 15px; }
    .lineup-row { grid-template-columns: repeat(3, 1fr); }
  }