.homepage {
  max-width: 1350px;
  margin: 92px auto;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  background: var(--color-primary);
  border-radius: 50px;
  padding: 80px 60px;
  color: white;
  margin: 120px 0 0 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  position: relative;

  &.hero-has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50px;
      z-index: 0;
    }

    .hero-container {
      position: relative;
      z-index: 1;
    }
  }

  .hero-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .hero-header {
    flex-shrink: 0;
  }

  .hero-date,
  .hero-location {
    font-size: 22px;
    font-weight: 600;
  }

  .hero-middle {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  h1 {
    font-family: var(--font-heading);
    color: white;
    font-size: 85px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 20px;
  }

  .hero-description {
    font-size: 18px;
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 0;
  }

  .hero-tagline {
    font-size: 24px;
    line-height: normal;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 16px;
    margin-bottom: 0;
  }

  .hero-footer {
    flex-shrink: 0;
    padding-top: 24px;
  }

  .hero-buttons {
    margin-bottom: 0;
  }

  .hero-button {
    background: var(--color-secondary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: #0090c5;
      transform: translateY(-2px);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }
}

/* ==========================================================================
   About Cards Section
   ========================================================================== */

.about-cards-section {
  .card {
    border: none;
    padding: 40px 48px;
  }

  .about-card-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
  }

  .about-card-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .card-primary {
    background: var(--color-secondary);
    color: white;
    border-radius: 50px;
    height: 275px;

    .about-card-title,
    .about-card-description {
      color: white;
    }

    .about-card-description {
      color: rgba(255, 255, 255, 0.95);
    }
  }

  .aag-stats {
    padding-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
  }

  .aag-stat {
    min-width: 0;
  }

  .aag-stat-value {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
  }

  .aag-stat-label {
    font-size: 24px;
    line-height: normal;
    color: rgba(255, 255, 255, 0.9);
  }

  .speaker-avatar {
    width: 56px;
    height: 56px;
    border: 3px solid white;
    margin-left: -16px;
    object-fit: cover;
    filter: grayscale(100%);
    object-position: top;

    &:first-child {
      margin-left: 0;
    }
  }

  .card-button-text {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    border: none;

    &:hover {
      background: rgba(255, 255, 255, 0.4);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }

  .card-secondary {
    background: var(--color-secondary);
    color: white;
    min-height: 200px;
    border-radius: 50px;

    .about-card-title,
    .about-card-description {
      color: white;
    }

    .about-card-description {
      color: rgba(255, 255, 255, 0.95);

      strong {
        color: white;
      }
    }
  }

  .card-button-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    background: #ff9933;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    position: static;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

    &:hover {
      background: #e6951f;
      transform: scale(1.08);
      color: white;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    svg {
      transform: rotate(45deg);
    }
  }

  .card-button-pill {
    background: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

    &:hover {
      background: #e6951f;
      transform: scale(1.05);
      color: white;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }
  }

  .card-tertiary {
    background: #ebebeb;
    border-radius: 50px;

    .about-card-title {
      color: var(--color-secondary);
    }

    .about-card-description {
      color: var(--color-secondary);
      font-size: 15px;
    }

    .card-button-text {
      background: var(--color-secondary);
      color: white;

      &:hover {
        background: #138496;
        color: white;
      }
    }
  }
}

/* ==========================================================================
   Schedule Section
   ========================================================================== */

.schedule {
  background: var(--color-bg-light);

  .schedule-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 64px;
    font-weight: 700;
  }

  .schedule-meta {
    color: var(--color-secondary);
  }

  .schedule-content {
    background: var(--color-secondary);
    border-radius: 50px;
  }

  .schedule-time {
    .day-date {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 700;
    }

    .time {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 700;
    }
  }

  .schedule-item-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: white;
  }

  .schedule-item-description {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
  }

  .schedule-button {
    background: var(--color-primary);
    color: white;
    padding: 16px 48px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    max-width: 400px;

    &:hover {
      background: #e6951f;
      transform: translateY(-2px);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }
}

/* ==========================================================================
   Keynote Speakers Section
   ========================================================================== */

.keynote-speakers-section {
  background: var(--color-bg-light);

  .section-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
  }

  .section-subtitle {
    color: var(--color-secondary);
    font-weight: 600;
    max-width: 280px;
    line-height: 1.5;
  }

  .speaker-image {
    aspect-ratio: 1;
    background: #fff;
    border-radius: 65px;

    img {
      object-fit: cover;
      object-position: center top;
      filter: grayscale(100%);
    }
  }

  .speaker-image-placeholder {
    background: #ebebeb;

    .speaker-initials {
      font-size: 48px;
      font-weight: 700;
      color: var(--color-secondary);
    }
  }

  .speaker-name {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
  }

  .speaker-title,
  .speaker-company {
    color: var(--color-secondary);
    font-size: 14px;
    line-height: 1.4;
  }

  .speaker-button {
    background: var(--color-secondary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }
}

/* ==========================================================================
   Why Attend Section
   ========================================================================== */

.why-attend-section {
  padding: 80px 0;

  .section-title {
    font-family: var(--font-heading);
    color: #f2a900;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
  }

  .section-header {
    align-items: center;
  }

  .section-subtitle {
    font-size: 18px;
    color: var(--color-secondary);
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    padding-left: 48px;
  }

  .benefit-card {
    background: var(--color-secondary);
    border-radius: 50px;
    padding: 40px;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    height: 280px;
    display: flex;
    flex-direction: column;
  }

  .benefit-number {
    position: absolute;
    bottom: -20px;
    left: 40px;
    font-size: 160px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.08);
    line-height: 1;
    background: linear-gradient(0deg, #ffa63000, #ffa630);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .benefit-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  .benefit-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
  }

  .benefit-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
    margin: 0;
    margin-top: 16px;
    flex: 1;
  }
}

/* ==========================================================================
   Ticket Options Section
   ========================================================================== */

.ticket-options-section {
  padding: 80px 0;

  .section-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
  }

  .ticket-card {
    padding: 40px 48px;
    border-radius: 50px;
    min-height: 420px;

    .ticket-title {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .ticket-details {
      font-size: 15px;
      margin-bottom: 16px;
    }

    .ticket-price {
      font-family: var(--font-heading);
      font-size: 56px;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .ticket-items {
      list-style: none;
      padding: 0;
      margin: 0 0 32px 0;
      font-size: 15px;
      line-height: 1.8;

      li {
        padding: 8px 0 8px 20px;
        position: relative;
        text-align: left;

        &::before {
          content: "•";
          position: absolute;
          left: 0;
        }
      }
    }

    .ticket-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px 48px;
      border-radius: 50px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
      margin-top: auto;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }

      svg {
        transform: rotate(45deg);
      }
    }
  }

  /* Primary card (first) */
  .ticket-card-primary {
    background: var(--color-primary);
    border: none;
    color: white;

    .ticket-title,
    .ticket-price {
      color: white;
    }

    .ticket-details {
      color: rgba(255, 255, 255, 0.95);
      height: 60px;
    }

    .ticket-items {
      color: white;

      li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
    }

    .ticket-button {
      background: white;
      color: var(--color-secondary);

      &:hover {
        color: #0077b6;
      }
    }
  }

  /* Secondary card (second) */
  .ticket-card-secondary {
    background: white;
    border: 1px solid var(--color-secondary);
    color: #333;

    .ticket-title,
    .ticket-price {
      color: var(--color-secondary);
    }

    .ticket-details {
      color: #555;
      height: 60px;
    }

    .ticket-items {
      color: var(--color-secondary);

      li {
        border-bottom: 1px solid rgba(0, 167, 225, 0.2);
      }
    }

    .ticket-button {
      background: var(--color-primary);
      color: white;

      &:hover {
        background: #e6951f;
        color: white;
      }
    }
  }
}

/* ==========================================================================
   Sponsors Grid Section
   ========================================================================== */

.sponsors-grid-section {
  background: var(--color-bg-light);

  .section-title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 64px;
    font-weight: 700;
  }

  .sponsor-card {
    background: #ebebeb;
    min-height: 280px;
    border-radius: 50px;
    padding: 40px;
  }

  .sponsor-logo img {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
  }

  .sponsor-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-secondary);
  }

  .sponsor-link {
    width: 56px;
    height: 56px;
    background: var(--color-primary);
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    bottom: 24px;
    right: 24px;

    &:hover {
      transform: scale(1.1);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }

  .sponsors-button {
    background: var(--color-secondary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }
}

/* ==========================================================================
   Venue Section
   ========================================================================== */

.venue-section {
  padding: 80px 0;

  .venue-card {
    background: var(--color-secondary);
    border-radius: 50px;
    overflow: hidden;
  }

  .venue-image-wrapper {
    position: relative;
    min-height: 400px;
  }

  .venue-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .venue-image-placeholder {
    background: #ebebeb;
    min-height: 400px;
  }

  .venue-placeholder-text {
    color: var(--color-secondary);
    font-size: 18px;
    font-weight: 600;
  }

  .venue-content-wrapper {
    color: white;
  }

  .venue-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .venue-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
  }

  .venue-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;

    li {
      position: relative;
      padding-left: 24px;
      margin-bottom: 12px;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.95);
      line-height: 1.5;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        width: 8px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 50%;
      }
    }
  }

  .venue-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: #e6951f;
      transform: translateY(-2px);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }
}

/* ==========================================================================
   Request Prospectus Section
   ========================================================================== */

.request-prospectus-section {
  padding: 80px 0;

  .prospectus-card {
    background: var(--color-secondary);
    border-radius: 50px;
    overflow: hidden;
  }

  .prospectus-content {
    color: white;
  }

  .prospectus-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    line-height: 1.1;
  }

  .prospectus-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0;
  }

  .prospectus-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: #e6951f;
      transform: translateY(-2px);
      color: white;
    }

    svg {
      transform: rotate(45deg);
    }
  }

  .prospectus-image-wrapper {
    position: relative;
    min-height: 400px;
  }

  .prospectus-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* ==========================================================================
   Insider/Contact Section
   ========================================================================== */

.insider {
  background: var(--color-bg-light);

  .insider-right {
    text-align: center;
    background: var(--color-primary);
    border-radius: 50px;
    padding: 40px;
    color: white;
  }

  .insider-form-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
  }

  .insider-form-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.5;
  }

  .insider-form-body {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.6;
  }

  .insider-form-wrapper {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
      color: white;
      padding: 12px 0;
      width: 100%;
      transition: border-color 0.3s ease;

      &:focus {
        outline: none;
        border-bottom-color: white;
      }

      &::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

    input[type="submit"],
    .wpcf7-submit {
      background: var(--color-secondary);
      color: white;
      border: none;
      padding: 16px 32px;
      border-radius: 50px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      width: fit-content;
      margin-top: 16px;
      font-family: var(--font-primary);
      margin-left: 45px;

      &:hover {
        background: #0090c5;
      }
    }
  }
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 991px) {
  .request-prospectus-section {
    .prospectus-card {
      border-radius: 50px;
    }

    .prospectus-image-wrapper {
      min-height: 250px;
    }

    .prospectus-title {
      font-size: 36px;
    }
  }

  .about-cards-section {
    .aag-stat-value {
      font-size: 42px;
    }

    .aag-stat-label {
      font-size: 20px;
    }
  }

  .hero {
    margin: 16px;
    padding: 48px 32px 60px;
    min-height: auto;

    h1 {
      font-size: 48px;
    }
  }

  .schedule .schedule-title,
  .keynote-speakers-section .section-title,
  .sponsors-grid-section .section-title,
  .why-attend-section .section-title,
  .ticket-options-section .section-title {
    font-size: 48px;
  }

  .venue-section {
    .venue-title {
      font-size: 36px;
    }

    .venue-image-wrapper {
      min-height: 300px;
      border-radius: 50px 50px 0 0;
      overflow: hidden;
    }

    .venue-card > .row {
      flex-direction: column;
    }
  }

  .why-attend-section {
    .benefit-number {
      font-size: 100px;
    }
  }

  .ticket-options-section {
    .ticket-card .ticket-price {
      font-size: 44px;
    }

    .ticket-card {
      padding: 32px 36px;
    }
  }

  .keynote-speakers-section .section-subtitle {
    max-width: none;
  }

  .insider {
    .insider-form-wrapper {
      input[type="submit"],
      .wpcf7-submit {
        width: 100%;
        margin: auto;
        margin-top: 30px;
      }
    }
  }
}

@media (max-width: 575px) {
  .hero {
    padding: 32px 24px 32px;

    h1 {
      font-size: 50px;
    }

    .hero-description {
      font-size: 16px;
    }
  }

  .about-cards-section {
    .card {
      padding: 32px 24px;
      text-align: left;
    }

    .about-card-title {
      font-size: 28px;
    }

    .card-primary {
      text-align: left;
      min-height: auto;
    }

    .card-button-icon {
      width: 56px;
      height: 56px;
      min-width: 56px;
      min-height: 56px;
    }
  }

  .schedule .schedule-title,
  .keynote-speakers-section .section-title,
  .sponsors-grid-section .section-title,
  .why-attend-section .section-title,
  .ticket-options-section .section-title {
    font-size: 36px;
  }

  .why-attend-section {
    padding: 48px 0;

    .benefit-card {
      padding: 24px 28px;
      min-height: 180px;
    }

    .benefit-number {
      font-size: 80px;
    }

    .benefit-title {
      font-size: 20px;
    }

    .benefit-description {
      font-size: 14px;
      margin-top: 12px;
    }
  }

  .ticket-options-section {
    padding: 0;

    .ticket-card {
      padding: 28px 24px;
      min-height: auto;

      .ticket-title {
        font-size: 24px;
      }

      .ticket-price {
        font-size: 36px;
      }
    }
  }

  .keynote-speakers-section {
    .speaker-name {
      font-size: 14px;
    }

    .speaker-title,
    .speaker-company {
      font-size: 11px;
    }
  }

  .insider-form-title {
    font-size: 28px;
  }

  .venue-section {
    padding: 48px 0;

    .venue-title {
      font-size: 28px;
    }

    .venue-image-wrapper {
      min-height: 220px;
    }

    .venue-description {
      font-size: 15px;
    }

    .venue-bullets li {
      font-size: 14px;
    }
  }
}