html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; }

    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.7s cubic-bezier(0.5,0,0,1), transform 0.7s cubic-bezier(0.5,0,0,1);
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal.delay-100 { transition-delay: 0.1s; }
    .reveal.delay-200 { transition-delay: 0.2s; }
    .reveal.delay-300 { transition-delay: 0.3s; }
    .reveal.delay-400 { transition-delay: 0.4s; }

    .hero-overlay {
      background: linear-gradient(to bottom, rgba(19,29,51,0.7), rgba(27,42,74,0.85));
    }

    .gold-line {
      width: 60px; height: 3px;
      background: linear-gradient(to right, #C9A96E, #e5b44e);
    }

    .shogi-pattern {
      background-image:
        linear-gradient(rgba(201,169,110,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,169,110,0.08) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    .card-hover {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(27,42,74,0.12);
    }

    .nav-scrolled {
      background: rgba(255,255,255,0.95) !important;
      backdrop-filter: blur(20px);
      box-shadow: 0 1px 20px rgba(27,42,74,0.08);
    }
    .nav-scrolled .nav-link { color: #1B2A4A !important; }
    .nav-scrolled .nav-link:hover { color: #C9A96E !important; }
    .nav-scrolled .nav-logo { color: #1B2A4A !important; }

    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-menu.open {
      transform: translateX(0);
    }

    .shogi-piece {
      width: 40px; height: 48px;
      clip-path: polygon(50% 0%, 10% 25%, 0% 100%, 100% 100%, 90% 25%);
      background: linear-gradient(135deg, #f4dfa9, #edca78);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 600; color: #1B2A4A;
    }

    .timeline-line {
      position: absolute; left: 20px; top: 0; bottom: 0; width: 2px;
      background: linear-gradient(to bottom, #C9A96E, rgba(201,169,110,0.1));
    }
    @media(min-width:768px) {
      .timeline-line { left: 50%; transform: translateX(-50%); }
    }
    .timeline-dot {
      width: 12px; height: 12px; border-radius: 50%;
      background: #C9A96E; border: 3px solid #FAF8F5;
      box-shadow: 0 0 0 2px #C9A96E;
      position: absolute; left: 15px; top: 6px;
    }
    @media(min-width:768px) {
      .timeline-dot { left: 50%; transform: translateX(-50%); }
    }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #FAF8F5; }
    ::-webkit-scrollbar-thumb { background: #C9A96E; border-radius: 4px; }

    .toast {
      transform: translateY(100px); opacity: 0;
      transition: all 0.4s ease;
    }
    .toast.show {
      transform: translateY(0); opacity: 1;
    }