* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      background:
        linear-gradient(180deg, rgba(5, 8, 22, 0.92) 0%, rgba(8, 18, 32, 0.98) 44%, #050816 100%),
        #050816;
      color: white;
      overflow-x: hidden;
    }

    .page-grid {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
      background-size: 72px 72px;
    }

    .glass {
      background: rgba(255, 255, 255, 0.055);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }

    .gradient-text {
      background: linear-gradient(135deg, #67E8F9 0%, #A7F3D0 46%, #FDE68A 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .course-card {
      min-height: 100%;
      transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    }

    .course-card:hover {
      transform: translateY(-4px);
      border-color: rgba(103, 232, 249, 0.35);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.32);
    }

    .course-card:hover .course-image {
      transform: scale(1.03);
    }

    .course-image {
      transition: transform 0.45s ease;
    }

    .course-card:focus-visible,
    .nav-link:focus-visible,
    .action-link:focus-visible {
      outline: 2px solid #67E8F9;
      outline-offset: 4px;
    }

    .section-label {
      color: #67E8F9;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .soft-divider {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
      height: 1px;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fadeInUp {
      animation: fadeInUp 0.6s ease-out both;
    }

    @media (max-width: 768px) {
      .mobile-tight {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }

    @media (max-width: 640px) {
      html,
      body {
        max-width: 100vw;
        overflow-x: hidden;
      }

      body .max-w-7xl {
        max-width: 100% !important;
      }

      .site-header-inner {
        padding-left: 1rem;
        padding-right: 1rem;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        max-width: 100vw !important;
      }

      .brand-link {
        gap: 0.75rem;
        min-width: 0;
      }

      .brand-mark {
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
      }

      .brand-title {
        font-size: 1.35rem;
        line-height: 1.1;
      }

      .brand-subtitle {
        display: none;
      }

      .top-cta {
        display: none;
      }

      .hero-copy {
        overflow-wrap: anywhere;
        word-break: break-all;
        max-width: calc(100vw - 2rem);
      }

      img {
        max-width: 100%;
      }
    }