/* roulang page: index */
:root {
      --primary-navy: #0A192F;
      --primary-dark: #0F172A;
      --mint-accent: #00E599;
      --teal-gradient: #00B4D8;
      --orange-accent: #FF6B35;
      --card-bg: #FFFFFF;
      --text-main: #1E293B;
      --text-sub: #64748B;
      --border-light: rgba(226, 232, 240, 0.8);
      --border-dark: rgba(255, 255, 255, 0.1);
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-card: 20px;
      --radius-hero: 28px;
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: #F8FAFC;
      color: var(--text-main);
      line-height: 1.65;
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    .font-num {
      font-family: 'DIN Alternate', Inter, system-ui, sans-serif;
    }

    .gradient-btn {
      background: linear-gradient(135deg, var(--mint-accent) 0%, var(--teal-gradient) 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gradient-btn:hover {
      box-shadow: 0 10px 25px -5px rgba(0, 229, 153, 0.4);
      transform: translateY(-2px);
    }

    .gradient-text {
      background: linear-gradient(135deg, #00E599 0%, #38BDF8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .nav-glass {
      background: rgba(10, 25, 47, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .card-modern {
      background: #FFFFFF;
      border: 1px solid var(--border-light);
      border-radius: var(--radius-card);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.02);
      transition: all 0.35s ease;
    }
    .card-modern:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 229, 153, 0.6);
      box-shadow: 0 20px 35px -10px rgba(0, 229, 153, 0.15);
    }

    .dark-card-modern {
      background: #1E293B;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: var(--radius-card);
      box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
      transition: all 0.35s ease;
    }
    .dark-card-modern:hover {
      transform: translateY(-6px);
      border-color: rgba(0, 229, 153, 0.5);
      box-shadow: 0 20px 35px -10px rgba(0, 229, 153, 0.2);
    }

    /* Stacked Hero Layout */
    .hero-stack-container {
      position: relative;
      perspective: 1000px;
    }
    .hero-main-card {
      position: relative;
      z-index: 20;
    }
    .hero-sub-card-left {
      position: absolute;
      top: 25px;
      left: -20px;
      z-index: 10;
      transform: rotate(-3deg);
      opacity: 0.92;
    }
    .hero-sub-card-right {
      position: absolute;
      bottom: -30px;
      right: -25px;
      z-index: 30;
      transform: rotate(2deg);
    }

    @media (max-width: 1024px) {
      .hero-sub-card-left, .hero-sub-card-right {
        position: static;
        transform: none;
        margin-top: 1rem;
      }
    }