.hero-section {
      padding: 5rem 0;
      background: #f6f6f8;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -5%;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(253, 139, 15, 0.15) 0%, transparent 70%);
      border-radius: 50%;
      animation: pulse 4s ease-in-out infinite;
    }

    .hero-section::after {
      content: '';
      position: absolute;
      bottom: -50%;
      left: -5%;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(112, 141, 213, 0.12) 0%, transparent 70%);
      border-radius: 50%;
      animation: pulse 5s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.8; }
    }

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

    .table-of-contents {
      padding: 3rem 0;
      background: #f6f6f8;
    }

    .toc-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      padding: 0;
      margin-top: 2rem;
    }

    .toc-list li {
      background: #ffffff;
      border-left: 4px solid #fd8b0f;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .toc-list li:hover {
      border-left-color: var(--secondary);
      transform: translateX(8px);
    }

    .toc-list a {
      display: block;
      padding: 1rem 1.5rem;
      color: var(--text);
      font-weight: 500;
    }

    .login-section {
      padding: 4rem 0;
      background: #ffffff;
    }

    .timeline-item {
      background: #f6f6f8;
      padding: 2.5rem;
      border-radius: 16px;
      margin-bottom: 2rem;
      position: relative;
      border-left: 4px solid #fd8b0f;
      box-shadow: var(--shadow-md);
      transition: all 0.3s ease;
    }

    .timeline-item:hover {
      border-left-color: var(--secondary);
      box-shadow: var(--shadow-lg);
    }

    .timeline-item h3 {
      margin-top: 0;
    }

    .mobile-app {
      padding: 4rem 0;
      background: #ffffff;
      position: relative;
      overflow: hidden;
    }

    .mobile-app::before {
      content: '';
      position: absolute;
      top: 20%;
      left: -3%;
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(112, 141, 213, 0.1) 0%, transparent 70%);
      border-radius: 50%;
    }

    .feature-block {
      background: #f6f6f8;
      padding: 2.5rem;
      border-radius: 16px;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-md);
      border: 1px solid rgba(253, 139, 15, 0.1);
      transition: all 0.3s ease;
    }

    .feature-block:hover {
      border-color: rgba(253, 139, 15, 0.3);
      transform: translateY(-4px);
    }

    .pokies-section {
      padding: 4rem 0;
      background: #f6f6f8;
    }

    .cards-grid-4 .card {
      display: flex;
      flex-direction: column;
    }

    .cards-grid-4 .card h3 {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
      color: #ffffff;
    }
    
    .pokies-section h3 {
      color: #ffffff;
    }

    .strategy-section {
      padding: 4rem 0;
      background: #ffffff;
    }

    .strategy-item {
      background: #ffffff;
      padding: 2.5rem;
      border-radius: 16px;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-md);
      position: relative;
      border-top: 4px solid #a867c3;
      transition: all 0.3s ease;
    }

    .strategy-item:hover {
      box-shadow: var(--shadow-lg);
      border-top-color: #fd8b0f;
    }

    .banking-section {
      padding: 4rem 0;
      background: #f6f6f8;
    }

    .banking-details {
      margin-top: 3rem;
      background: #f6f6f8;
      padding: 2.5rem;
      border-radius: 16px;
      box-shadow: var(--shadow-md);
    }

    .providers-section {
      padding: 4rem 0;
      background: #f6f6f8;
    }
    
    .providers-section h3 {
      color: #ffffff;
    }

    .cards-grid-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .faq-section {
      padding: 4rem 0;
      background: #ffffff;
    }

    .accordion-item {
      background: #f6f6f8;
      border-radius: 12px;
      margin-bottom: 1rem;
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(253, 139, 15, 0.1);
      transition: all 0.3s ease;
    }

    .accordion-item:hover {
      border-color: rgba(253, 139, 15, 0.3);
    }

    .accordion-header {
      padding: 1.5rem 2rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.1rem;
      color: var(--text);
      margin: 0;
      transition: all 0.3s ease;
      position: relative;
    }

    .accordion-header::after {
      content: '+';
      font-size: 1.5rem;
      color: #fd8b0f;
      font-weight: 700;
      transition: transform 0.3s ease;
    }

    .accordion-item.active .accordion-header::after {
      transform: rotate(45deg);
    }

    .accordion-header:hover {
      color: #fd8b0f;
    }

    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .accordion-item.active .accordion-body {
      max-height: 1000px;
      padding: 0 2rem 1.5rem;
    }

    @media (max-width: 767px) {
      h1 {
        font-size: 2rem;
      }

      h2 {
        font-size: 1.75rem;
      }

      h3 {
        font-size: 1.4rem;
      }

      .hero-section {
        padding: 3rem 0;
      }

      .cards-grid-3 {
        grid-template-columns: 1fr;
      }

      .toc-list {
        grid-template-columns: 1fr;
      }

      .timeline-item, .feature-block, .strategy-item, .banking-details {
        padding: 1.5rem;
      }

      .accordion-header {
        padding: 1rem 1.5rem;
        font-size: 1rem;
      }

      .accordion-item.active .accordion-body {
        padding: 0 1.5rem 1rem;
      }

      .card {
        padding: 1.5rem;
      }
    }

    @media (min-width: 768px) and (max-width: 1023px) {
      .cards-grid-3 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .container {
        padding: 0 40px;
      }
    }

    @media (min-width: 1440px) {
      h1 {
        font-size: 3.5rem;
      }

      h2 {
        font-size: 3rem;
      }
    }