/* roulang page: index */
@layer base {
      body {
        margin: 0;
        font-feature-settings: "cv02","cv03","cv04","cv11";
        scroll-behavior: smooth;
      }
      section {
        scroll-margin-top: 80px;
      }
    }
    .text-glow-cyan {
      text-shadow: 0 0 8px rgba(0,240,255,0.6);
    }
    .hero-overlay {
      background: linear-gradient(135deg, rgba(11,14,20,0.85) 0%, rgba(22,26,35,0.7) 100%);
    }
    .card-hover-lift {
      transition: all 0.25s ease-in-out;
    }
    .card-hover-lift:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(168,85,247,0.25);
      border-color: rgba(168,85,247,0.4);
    }
    .bg-grid {
      background-image: radial-gradient(rgba(168,85,247,0.12) 1px, transparent 1px);
      background-size: 24px 24px;
    }
    .input-focus-glow:focus {
      border-color: #00F0FF;
      box-shadow: 0 0 0 3px rgba(0,240,255,0.25);
      outline: none;
    }
    .accordion-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease;
    }
    .accordion-content.open {
      grid-template-rows: 1fr;
    }
    .hamburger-line {
      transition: all 0.3s;
    }
    .mobile-menu {
      transition: max-height 0.4s ease, opacity 0.3s;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }
    .mobile-menu.show {
      max-height: 400px;
      opacity: 1;
    }
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.2rem;
        line-height: 2.8rem;
      }
      section {
        scroll-margin-top: 70px;
      }
    }
    .hover\:bg-cyan-10:hover {
      background-color: rgba(0,240,255,0.1);
    }