/* roulang page: index */
:root {
      --primary: hsl(82, 85%, 42%);
      --primary-dark: hsl(82, 85%, 34%);
      --dark-text: hsl(215, 25%, 12%);
      --muted-text: hsl(210, 20%, 28%);
      --bg-warm: hsl(0, 0%, 98%);
      --bg-cold: hsl(210, 20%, 96%);
      --border-subtle: rgba(15, 23, 42, 0.08);
      --border-dark: rgba(255, 255, 255, 0.12);
      --card-radius: 16px;
      --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    * {
      box-sizing: border-box;
      scroll-behavior: smooth;
    }

    body {
      color: var(--dark-text);
      background-color: var(--bg-warm);
      letter-spacing: -0.015em;
    }

    .glass-nav {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid var(--border-subtle);
    }

    .tech-grid-bg {
      background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .card-elevate {
      transition: var(--transition-smooth);
      border: 1px solid var(--border-subtle);
    }
    .card-elevate:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
      border-color: rgba(132, 204, 22, 0.4);
    }

    .hero-mask {
      background: linear-gradient(135deg, rgba(10, 13, 11, 0.88) 0%, rgba(15, 23, 42, 0.72) 100%);
    }

    details summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary .faq-icon {
      transform: rotate(180deg);
      color: var(--primary);
    }
    details[open] summary {
      color: hsl(82, 85%, 34%);
    }

    .mono-num {
      font-family: 'DIN', 'SF Pro Display', 'Roboto Condensed', sans-serif;
      font-feature-settings: "tnum";
    }