/* roulang page: index */
:root {
      --bg-dark: #090D14;
      --bg-card: #111827;
      --bg-light: #F8FAFC;
      --accent-red: #E63946;
      --accent-emerald: #10B981;
      --accent-blue: #2563EB;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-line: rgba(255, 255, 255, 0.08);
    }
    body {
      font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-dark);
      color: #F1F5F9;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
    }
    .font-mono-num {
      font-family: 'Chakra Petch', monospace, sans-serif;
    }
    .clip-slant {
      clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    }
    .clip-slant-reverse {
      clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }
    .hero-mask {
      background: linear-gradient(135deg, rgba(9, 13, 20, 0.94) 0%, rgba(15, 23, 42, 0.88) 55%, rgba(230, 57, 70, 0.35) 100%);
    }
    .grid-pattern {
      background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .tech-border {
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
    }
    .tech-border::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 10px;
      width: 24px;
      height: 2px;
      background: var(--accent-red);
    }
    .glass-nav {
      background: rgba(9, 13, 20, 0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .btn-action {
      background: linear-gradient(135deg, #E63946 0%, #D90429 100%);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 4px 20px rgba(230, 57, 70, 0.35);
    }
    .btn-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(230, 57, 70, 0.55);
    }
    .hover-card {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-card:hover {
      transform: translateY(-4px);
      border-color: rgba(230, 57, 70, 0.45);
      box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
    }
    details summary::-webkit-details-marker {
      display: none;
    }
    html {
      scroll-behavior: smooth;
    }